How to display HTML received in JSON using React

Question

JSON

var obj = {
   content: "<p class="p1">Sample p tag one.</p> <p class="p1">Also 
   another paragraph sample.</p> <p><b>sample text</b></p> <p>More info <a 
   title="" href="https://www.google.com/" 
   target="_blank" rel="noopener"><em>THE WORK AHEAD: MACHINES, SKILLS AND 
   U.S. LEADERSHIP</em></a></p>"
};

How would I render this code in react? It shows all of the html tags.

Answer 1

Through dangerouslySetInnetHTML.

const htmlString = '<p>My html</p>';

const innerHtmlObject = {
  __html: htmlString,
};

<div dangerouslySetInnerHTML={innerHtmlObject} />

Note: This is a bad practice that can lead to security vulnerability!

Answer 2

You can try this

<div
  dangerouslySetInnerHTML={{
    __html: this.state.obj.content
  }}
/>