CODEWITHSUNDEEP
javascripthtmlnode.jsreactjsnext.js
Akash Kanaujiya
Akash Kanaujiya

Reputation: 227

How to convert String into a HTML element in Next JS Application?

I have saved the product description as the HTML elements into a Database like this. But when I am rendering this data into div, this is displaying as String. I want to display all the data like HTML elements in my Next JS application. I tried JSON.parse, but it's not working.

If someone can help me to fix this will be appreciated.

{
"images": [
{
"alternativeText": "cinnamon",
"path": "public/uploads/5585.jpg"
}
],
"_id": "606c39c884372a0e20c3f9bb",
"name": "Cinnamon",
"code": "5586",
"price": 49,
"category": {
"_id": "6064b37855bd0f26e0df4616",
"name": "Natural Essential Oils",
"createdAt": "2021-03-31T17:38:00.066Z",
"updatedAt": "2021-03-31T17:38:24.398Z",
"__v": 0
},
"description": "<p>Cinnamon Bark Vitality&trade; essential oil has a warm, spicy flavor that complements a variety of classic culinary treats and drinks. Cinnamon Bark Vitality is not only great for elevating dishes, but it can also be taken as a dietary supplement and is an important ingredient in some of Young Living&rsquo;s most popular products, including Thieves&reg; Vitality&trade; and Inner Defense&trade;. Cinnamon Bark Vitality&rsquo;s warm taste and nostalgic notes bring a spicy addition to your favorite dishes. By using Cinnamon Bark Vitality as a dietary supplement, you can help support healthy digestive and immune systems.</p>",
"createdAt": "2021-04-06T10:36:56.440Z",
"updatedAt": "2021-04-06T10:36:56.440Z",
"__v": 0
}

Check the image attachment. enter image description here

Next Js application code

const Product = ({product}) => {
    return (
        <Fragment>
            <Head>
                <title>Product</title>
            </Head>
            <Layout>
                <div className="container-fluid product-page">
                    <div className="page-body">
                        <div className="row product">
                            <div className="col-xl-5 col-lg-5 image-box">
                                <div className="preview-image">
                                    <div className="image">
                                        <img
                                            src={ImageRootPath + "/" + product.images[0].path}
                                            alt={product.images[0].alternativeText}
                                        />
                                    </div>
                                </div>
                            </div>
                            <div className="col-xl-7 col-lg-7 info-box">
                                <div className="product-info">
                                    <div className="product-name">
                                        <h4>{product.name}</h4>
                                        <p>{"Product code: " + product.code}</p>
                                        <hr/>
                                    </div>
                                    <div className="product-price">
                                        <h5>Price: <span>{product.price + "$"}</span></h5>
                                        <p>{"Quantity: 5ml"}</p>
                                    </div>
                                    <div className="product-des">
                                        {product.description}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </Layout>
        </Fragment>
    );
}

Upvotes: 14

Views: 29402

Answers (1)

hgb123
hgb123

Reputation: 14891

As you want to display raw HTML, so this

<div className="product-des">
  {product.description}
</div>

should be changed to

<div className="product-des" dangerouslySetInnerHTML={{ __html: product.description }}>

This is covered in the official doc

dangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM [...] you have to type out dangerouslySetInnerHTML and pass an object with a __html key

And you also have to be mindful of the risky to set raw HTML in the case like this

In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack

Upvotes: 32

Related Questions