JSX HTML string variable displaying as text

Question

I have a JSON file with a variable called htmlContent. I am trying to display this in a component but when it is rendered it shows it as text. I just want the text to be surrounded by an h2 tag.

MY JSON FILE

const BookData = {
  data: [
    {
      id:"1",
      pageHeader:"Contents",
      htmlContent:`<h2>hello</h2>`,
      definePrototypes:"",
      exportComponent:"export default App;"
    }
  ]

};

MY REACT COMPONENT

      <section id='content'>
          {props.htmlContent }
          </section>

MY ACTUAL RESULT <h2>hello</h2>

MY EXPECTED RESULT hello

<section id='content'><h2>{props.htmlContent }</h2></section> ? Why is the <h2> inside the string and not the JSX unless you want to render the string <h2> and not an <h2> element. — Shilly
– Shilly, Commented Jan 22, 2020 at 9:43

Akhil Aravind · Accepted Answer · 2020-01-22 09:43:17Z

3

You need to use dangerouslySetInnerHTML to render html content in react, otherwise it will show as string

Change to be made in this element

<section id='content'>
    {props.htmlContent }
</section>

Change the above block to

<section id='content' dangerouslySetInnerHTML={{ __html: props.htmlContent }}></section>

This should do the job. Check the link for details https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

answered Jan 22, 2020 at 9:43

Akhil Aravind

6,0451 gold badge18 silver badges37 bronze badges

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

3 Comments

Abdul Mannan Over a year ago

Yes, that is correct. But better to return it as a simple text and wrap that property in <h2> yourself.

Akhil Aravind Over a year ago

@AbdulMannan, thats also correct, but his need is to show html content in dom, for that there is only one proposed method, that is dangerouslySetInnerHTML

Abdul Mannan Over a year ago

Exactly. That's why I mentioned Yes, that is correct. However, its always good to share the best practice if that is doable.

akhtarvahid · Accepted Answer · 2020-01-22 09:45:14Z

Try this

<div contentEditable='true' dangerouslySetInnerHTML={{ __html: props.htmlContent }}></div>

The immediate effect of using innerHTML versus dangerouslySetInnerHTML is identical -- the DOM node will update with the injected HTML.

However, behind the scenes when you use dangerouslySetInnerHTML it lets React know that the HTML inside of that component is not something it cares about.

Because React uses a virtual DOM, when it goes to compare the diff against the actual DOM, it can straight up bypass checking the children of that node because it knows the HTML is coming from another source. So there's performance gains.

More importantly- if you simply use innerHTML, React has no way to know the DOM node has been modified. The next time the render function is called, React will overwrite the content that was manually injected with what it thinks the correct state of that DOM node should be.

Your solution to use componentDidUpdate to always ensure the content is in sync I believe would work but there might be a flash during each render.

Reference Dangerously Set innerHTML

j.ian.le · Accepted Answer · 2020-01-22 09:46:19Z

0

If React is imported in the JS file you can just remove the ticks(`) from the JSON like this:

 const BookData = {
  data: [
    {
      id:"1",
      pageHeader:"Contents",
      htmlContent:<h2>hello</h2>,
      definePrototypes:"",
      exportComponent:"export default App;"
    }
  ]

};

answered Jan 22, 2020 at 9:46

j.ian.le

2074 silver badges16 bronze badges

Collectives™ on Stack Overflow

JSX HTML string variable displaying as text

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related