Sure, it's a bad idea to store raw HTML in a database and feed that into dynamic views in your web application, but if you absolutely insist on doing it, React provides `dangerouslySetInnerHTML` to get the job done.

https://app.egghead.io/api/v1/lessons/react-using-react-s-jsx-to-dangerouslysetinnerhtml/subtitles

Using React's dangerouslySetInnerHTML

[00:00] By default, React does not allow you to set raw HTML as the inner HTML of a component, for a number of reasons, most notably cross-site scripting. However, if you're developing in the front end long enough, eventually, you're just going to have to do it.

[00:16] Here, we've got a very simple component. Runs through this prop of products and lays out a product ID, a product price, and a description. Here's our data. Nice and simple. Everything's an integer or a string. We'll load that up in the browser here. There we go. Everything looks great.

[00:36] Now, what we're going to do is we're going to switch over to this updated version of the data, where we have actual HTML in the data. To do that, I'm just going to change this to "html.js." Load that up, and you can see that we are getting escaped HTML strings. React is doing that by default. That's the way it's supposed to be.

[00:59] The first thing you should do is complain to everybody you possibly can that this is a bad idea, explain cross-site scripting. At the end of the day, if you absolutely have to do it, here's how we do it. Rather than passing our item description in as the inner HTML or as a child, we're going to pass it into our props. The way we do that is here in our props, we're going to create a key called "dangerouslySetInnerHTML." Then that's going to be an object itself. It's going to have a key here of HTML. Then we pass to that our item.description.

[01:40] There is definitely some debate about, "Why should this be so difficult? Why don't you just have a raw HTML key or something like that?" The general idea with the team at React is that if you make something a little bit difficult to do, people will do it less.

[01:57] It's actually got a nice side benefit, in that I can show this to a client. I can say, "Here. You wanted to set some raw HTML. Here's how we do it in React with dangerouslySetInnerHTML." The first question I get every single time is, "Why dangerously?" It's got a nice little side effect there.

[02:16] We'll save this, load it up. There you go. We've got our raw, dangerous HTML there in our components.

Using React's dangerouslySetInnerHTML

Share this video with your friends