DEV Community

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

Posted on

How to Render HTML string in a React component ?

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

Top comments (0)