I'm using commerce js on my website, but in the description box, it displays a <p> tag

Question

I'm creating my first website with reactjs and commerce js, but the description box in commerce js isn't functioning.

This is description box of commerce js:

This is my code in react:

Here is p tag in output:

Answer 1

Commerce.js uses HTML in the description field for products. Modern JavaScript frameworks such as React will not allow you to render external HTML by default for security reasons. You have two options:

1. You can use React's dangerouslySetInnerHTML method, if you trust the Commerce.js API's response:

<p dangerouslySetInnerHTML={{__html: product.description}} />

2. You can strip HTML from the product.description variable and render plain text instead. Example package to help with this might be https://www.npmjs.com/package/striptags

Answer 2

1. I simply used .slice(3,-4) method on description string and it does the job.

2. Also, you can type dangerouslySetInnerHTML={{__html: product.desctiption}}