Display html in status bar

Question

I use setState to update the html part, but I found that the new html update is not showing. 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 updates html from the server, but the result is the same. How to enable display of string in state?

Answer 1

Use dangerouslySetInnerHTML to insert HTML as a string in React (but note that React will not be able to use this markup in its virtual DOM):

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

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

The API for this is intentionally complex because it is not safe to do it regularly. React has XSS protection, using dangerouslySetInnerHTML circumvents them and puts you at risk if you don't sanitize this data.