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 dangerous-looking name was a built-in reminder to pay attention to correctly whitelisting the HTML tags I allowed the user to enter to that HTML string.

Lessons in this unit:

0:	Introduction
1:	▶︎ How to render HTML in React
2:	Conditional rendering in React
3:	How to loop inside React JSX
4:	React, how to make responsive JSX
5:	How to repeat displaying something in JSX
6:	How to move around blocks of code with React and Tailwind