This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Using React's dangerouslySetInnerHTML

    Joe MaddaloneJoe Maddalone

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss