DEV Community

loading...
Cover image for How to Render HTML string in a React component ?

How to Render HTML string in a React component ?

jobpick.in
Find Your Dream Frontend Developer Job Here!
・1 min read

In this tutorial we will see how to render HTML string in a React component.

Most of the rich text editor for react uses html for the formatting. So the data in the text editor is saved as string.

"<p>some dummy <span>data</span></p>"
Enter fullscreen mode Exit fullscreen mode

We cannot directly render this string, html tags will also get treated as raw string.

The easiest solution for this is to use dangerouslySetInnerHTML.

<div dangerouslySetInnerHTML={{ __html: "<p>some data </p>" }} />
Enter fullscreen mode Exit fullscreen mode

by using dangerouslySetInnerHTML, entire html in the string is preserved.
Other alternative would be to use a html-react-parser library.

Like this post?
Our Twitter : @job_pick
Our website : jobpick.in

Discussion (0)