Skip to content

How to render HTML in React

The Valley of Code

Your Web Development Manual

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.

β†’ Get my React Beginner's Handbook
β†’ Read my full React Tutorial on The Valley of Code
  • THE VALLEY OF CODE (+ PRO), your web development manual
  • I wrote 15+ free coding BOOKS, download them here
  • SOLOPRENEUR LAND the missing MBA for wannabe solopreneurs craving a life with more freedom, control, fulfillment and purpose (summer 2024)