4
How to Render HTML string in a React component ?
source link: https://dev.to/jobpick/how-to-render-html-string-in-a-react-component-3kd2
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
How to Render HTML string in a React component ?
Aug 3
・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 modeExit 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 modeExit 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
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK