Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 960 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Using React's dangerouslySetInnerHTML

2:23 React lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

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.

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.

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.

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.

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.

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.

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



HEY, QUICK QUESTION!
Joel's Head
Why are we asking?