How to append data on JavaScript?(React.js)

Question

I want to append some JSON data to frontend(React.js) After fetching the JSON data, I want to append the data to JSX. The data looks like below: (The value of description is string)

data = { description: "<p>Description Content</p><ul><li>list1</li><li>list2</li><li>list3</li<li>list4</li></ul>" }

I want to append this to JSX, how can I do that?

const Desctiption = ({ data }) => {
  const { description } = data;

  return (
    <div className="description-tag">

    </div>
  )
}
export default Desctiption;

score 0 · Answer 1 · answered May 13 '21 at 14:56

Try this:

const Desctiption = ({ data }) => {
  const { description } = data;

  return (
    <div className="description-tag">
      <div dangerouslySetInnerHTML={{ __html: description }} />
    </div>
  )
}
export default Desctiption;

However this approach might be risky. Check out the docs for more information: https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

How to append data on JavaScript?(React.js)

1 Answers1