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
– srk, Commented Dec 17, 2020 at 14:29
Maybe this can work. $("body").append($(data.html)); If jquery works. — cbalakus
– cbalakus, Commented Dec 17, 2020 at 14:34

errorau · Accepted Answer · 2020-12-17 14:40:32Z

5

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

answered Dec 17, 2020 at 14:40

errorau

2,3312 gold badges20 silver badges45 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related