如何在从 json 获取数据时在 React 上呈现 html 标签

Question

How to render HTML tag on React while fetching data from json. In my json data contains <h2> tag but it fails to render <h2> tag.

here is my code

const [items, setItems] = useState({"data" : `"<h2>hi</h2>, this is a car"`})
return (
        <div>
          <p>{items.data}</p>
        </div>
)

The output is coming as

"<h2>hi</h2>, this is a car"

but expected output should be

hi ,this is a car

Answer 1

You can use dangerouslySetInnerHTML for that purpose, read from the documentation:

dangerouslySetInnerHTML is React's replacement for using innerHTML in the browser DOM.

Try as the following:

function createMarkup(data) {
  return { __html: data };
}

return <div>
    <p><div dangerouslySetInnerHTML={createMarkup(items.data)} /></p>
</div>

Important note also from the docs:

In general, setting HTML from code is risky because it's easy to inadvertently expose your users to a cross-site scripting (XSS) attack. So, you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key, to remind yourself that it's dangerous.

I hope this helps!

Answer 2

If your data is static instead of setting it as a string set it as a JSX element and that should take care of rendering html

const Data = () => (<><h2>hi</h2>, this is a car</>)
const [items, setItems] = useState({data : <Data />})
return (
   <div>
     <p>{items.data}</p>
   </div>
)