javascripthtmlreactjsjsx

How to render HTML string as real HTML?

Here's what I tried and how it goes wrong.

This works:

<div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} />

This doesn't:

<div dangerouslySetInnerHTML={{ __html: this.props.match.description }} />

The description property is just a normal string of HTML content. However it's rendered as a string, not as HTML for some reason.

enter image description here

Any suggestions?

Solution

  • Check if the text you're trying to append to the node is not escaped like this:

    var prop = {
    match: {
        description: '&lt;h1&gt;Hi there!&lt;/h1&gt;'
    }
};

    Instead of this:

    var prop = {
    match: {
        description: '<h1>Hi there!</h1>'
    }
};

    if is escaped you should convert it from your server-side.

    The node is text because is escaped

    The node is text because is escaped

    The node is a dom node because isn't escaped

    The node is a dom node because isn't escaped