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.

Ramon Balthazar · Accepted Answer · 2018-07-16 02:10:36Z

4

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!

edited Jul 16, 2018 at 2:10

answered Jul 13, 2018 at 15:08

Ramon Balthazar

4,3404 gold badges30 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tholle · Accepted Answer · 2018-07-13 15:19:09Z

2

You can try this

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

edited Jul 13, 2018 at 15:19

Tholle

113k22 gold badges209 silver badges198 bronze badges

answered Jul 13, 2018 at 15:15

Adnan

1,70713 silver badges19 bronze badges

Comments

Paul Redmond · Accepted Answer · 2019-04-11 08:32:20Z

2

You need to parse the HTML.

You can do this through dangerouslySetInnerHTML but it's safer to sanitize it first using something like html-react-parser.

import Parser from 'html-react-parser';

Inside you render function:

<div>{Parser(obj.content)}</div>

edited Apr 11, 2019 at 8:32

answered Jul 13, 2018 at 15:10

Paul Redmond

3,2964 gold badges35 silver badges53 bronze badges

Collectives™ on Stack Overflow

How to display HTML received in JSON using React

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related