Displaying pure html in react

Question

I playing with react-draft-wysiwyg editor. I progress quite well. But now I stuck how can I display the output of the editor.

For example, let suppose body is the output of the wysiwyg editor:

function ShowHtml(props) {
  let body = '<p>Sample text with <strong>bold</strong> and <em>italic</em></p>'
  return (
    <div>
     {body}
    </div>
  )
}

Now the output will be exactly the same html with tags displayed without formatting.

<p>Sample text with <strong>bold</strong> and <em>italic</em></p>

And I would like something like this:

Sample text with bold and italic

In jQuery I would just set the html property of the div tag. But I do not know how to do it the proper way in React. Can I just grab a reference to the div and update it somehow just like in jQuery? Is it working with the virtual Dom?

Answer 1

try to insert as an attribute dangerouslySetInnerHTML={{__html: body}}

  function ShowHtml(props) {
    let body = '<p>Sample text with <strong>bold</strong></p>'
    return (
     <div  dangerouslySetInnerHTML={{__html: body}} />
    )
  }

https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml