React: how do I render source code in a variable?

Question

I store some html source code in database, it's a block of code like this:

<div class="content"><h1>Page 1</h1></div>

Now in react I get them in a variable ({this.state.content}), but when I try to render them the source code got displayed as a string. Here's how I use it:

<div>
    {this.state.content}
</div>

On page it just shows the source code directly. How do I get them render as html source code instead of a string?

Are you talking about rendering html tags on the screen and not have it become a DOM element? If so, you need to escape them. w3schools.com/HTML/html_entities.asp — Andrew
– Andrew, Commented Jan 13, 2018 at 19:04
React provides an attribute for doing this, dangerouslySetInnerHTML. however, from the name, it should be obvious that this isn't a recommended practice, and you should consider more managed alternatives. In general, storing HTML in variables or in your database is a common attack vector. — Claies
– Claies, Commented Jan 13, 2018 at 19:06
@Andrew It's actually the opposite way. I want it to become a DOM element instead of displaying the html tags on screen. — Suanmeiguo
– Suanmeiguo, Commented Jan 13, 2018 at 19:14
@Claies That worked. Thank you. Also good suggestion, I'll also keep this as bad practice in mind. — Suanmeiguo
– Suanmeiguo, Commented Jan 13, 2018 at 19:17

kazimt9 · Accepted Answer · 2018-01-13 19:37:22Z

2

Actually, you are trying to set raw HTML. Try this.

<div dangerouslySetInnerHTML={{__html: this.state.content}}></div>

Duplicate of this question

answered Jan 13, 2018 at 19:37

kazimt9

5635 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React: how do I render source code in a variable?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related