render html in state string

Question

I use setState to update part of the html but I found the new update html is not rendered. Here is the code, js fiddle:

html:

<div>hello<br />world<br /></div>
<div id='content'></div>

js:

var Main = React.createClass({
    getInitialState: function() {
        return {output: 'hello<br />world<br />'};
      },
    render: function() {
        return (
            <div>           
                {this.state.output}
            </div>
        );
        }
});

React.renderComponent(<Main/>, document.getElementById('content'));

I omit the part that update html from the server but the result is the same. How to let the string in state be rendered?

score 32 · Accepted Answer · edited Jul 28 '20 at 14:27

32

Use dangerouslySetInnerHTML to inject HTML as a string in React (but note that React won’t be able to use this markup in its virtual DOM):

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

http://jsfiddle.net/5Y8r4/11/

The API for doing this is deliberately complex because this isn't safe to do routinely. React has protections against XSS, using dangerouslySetInnerHTML circumvents those and opens you up to risk if you aren't sanitizing that data.

edited Jul 28 '20 at 14:27

isherwood

58,414
16
114
157

answered Mar 22 '15 at 00:30

David Hellsing

106,495
44
176
212

That works. Thanks. one more question, is this a common practice or also the best practice? – qqibrow Mar 22 '15 at 16:10
4

Storing HTML is not common but sometimes it is necessary (eg, you generate safe HTML on the server from user data, like a comment on stack overflow, and need to render it). – Paul O'Shannessy Mar 22 '15 at 18:04
3

What would be the best way to sanitize this html? – RobSeg Jun 28 '16 at 12:05

render html in state string

1 Answers1

Linked

Related