How to display html code from a json data in my react js page?

Question

I have created a component in a react js app, which calls an api using fetch and get some json data like below. How can i display the html in the json data as is, in my own html code?

   data = {
              duration : "1", 
              html : "<div><p>some message here</p><p> more text here <span> styled text <span><p></div>"
          }

Do you mean you want to display the `html` as raw text? Or you want to render the `html`? — srk, Dec 17 '20 at 14:29
Maybe this can work. $("body").append($(data.html)); If jquery works. — cbalakus, Dec 17 '20 at 14:34

score 5 · Accepted Answer · answered Dec 17 '20 at 14:40

First you should use a package html-react-parser

npm i html-react-parser

then

import parse from 'html-react-parser'
const yourHtmlString = '<h1 >Hello</h1>' // it's mean your data state html field

after just call like this

 <div>
    {parse(yourHtmlString)}
</div>

Also you can find more detail about this in this question

Render HTML string as real HTML in a React component

How to display html code from a json data in my react js page?

1 Answers1