# How to render HTML in React

> Learn how to render an HTML string in React without it being escaped, using the built-in dangerouslySetInnerHTML attribute or the react-html-parser library.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2019-12-04 | Topics: [React](https://flaviocopes.com/tags/react/) | Canonical: https://flaviocopes.com/how-to-render-html-react/

I had this problem - I needed to add an HTML string in a [React](https://flaviocopes.com/react/) application, coming from a WYSIWYG editor, but simply adding `{myString}` to the [JSX](https://flaviocopes.com/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:

```jsx
<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](https://flaviocopes.com/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://flaviocopes.com/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.