1

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 description box of commerce js

This is my code in react:

this is my code in react

Here is p tag in output:

Here is p tag in output

RBT
  • 24,161
  • 21
  • 159
  • 240
Karina Shrestha
  • 11
  • 3
  • Please post your code directly into the question in place of putting its screenshot. – RBT Jun 25 '22 at 22:34

2 Answers2

0

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}} />
  1. 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
scrowler
  • 24,273
  • 9
  • 60
  • 92
0

  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}}

RBT
  • 24,161
  • 21
  • 159
  • 240
Armin Čičić
  • 1
  • 1