Using React's dangerouslySetInnerHTML
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.
[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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!