How to render HTML in React
New Course Coming Soon:
Get Really Good at Git
Find out how to render an HTML string in the DOM without escaping, using React
I had this problem - I needed to add an HTML string in a React application, coming from a WYSIWYG editor, but simply adding {myString}
to the JSX was escaping the HTML.. so the HTML tags were displayed to the user!
How did I solve it? I saw 2 solutions, basically. The first native, the second required a library.
First solution: use dangerouslySetInnerHTML
You can use the dangerouslySetInnerHTML
attribute on an HTML element to add an HTML string inside its content:
<div
dangerouslySetInnerHTML={{
__html: props.house.description
}}></div>
Remember that it’s called dangerously for a reason. HTML is not escaped at all in this case, and it might cause XSS issues.
But there are good use cases for this.
Second solution: use a 3rd party library
There are many libraries that implement the functionality that dangerouslySetInnerHTML
provides, in a simpler way.
One of them is the react-html-parser
library.
See the library on GitHub: https://github.com/wrakky/react-html-parser
Warning: at the time of writing, it’s not been updated in the last 2 years, so things might break in the future. It worked for me.
Which one to use?
You can look for other similar libraries, but in the end I chose to use the dangerouslySetInnerHTML
way.
This dangerously-looking name was a built-in reminder to pay attention at correctly whitelisting the HTML tags I allowed the user to enter to that HTML string.
Here is how can I help you:
- COURSES where I teach everything I know
- THE VALLEY OF CODE your web development manual
- BOOTCAMP 2024 cohort in progress, next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- SOLO LAB everything I know about running a lifestyle business as a solopreneur
- Interesting links collection
- Follow me on X