How to render a react element using an html string?

Question

var Klass = React.createClass({
  this.props.html_string = '<button>BUTTON_TEXT</button>';
  render: function(){
    return (
      <div className="wrapper">
        {this.props.html_string}
      </div>
    );
  }
});

Currently {this.props.html_string} gives me a text node. How can I make this a HTML DOM node?

score 39 · Accepted Answer · answered Apr 17 '15 at 18:32

39

What you want is dangerouslySetInnerHTML

https://facebook.github.io/react/tips/dangerously-set-inner-html.html

function createMarkup() { return {__html: 'First &middot; Second'}; };
<div dangerouslySetInnerHTML={createMarkup()} />

Edit: you'll want to htmlencode the string.

answered Apr 17 '15 at 18:32

SnareHanger

919
14
22

2

What do you mean by htmlencode? Could you expand your example? I'm interested in sanitizing the html. Thanks – RobSeg Jun 28 '16 at 12:00
1

I mean use html entities when necessary, like > and < instead of > and – SnareHanger Jun 28 '16 at 12:30

score 4 · Answer 2 · answered Apr 17 '15 at 18:36

4

Also be aware of React.renderToString('html') which can be used on server - https://facebook.github.io/react/docs/top-level-api.html

answered Apr 17 '15 at 18:36

Kosmetika

20,095
37
101
164

8

`React.renderToString()` is now deprecated, use `ReactDOMServer.renderToString()` now (`import ReactDOMServer from 'react-dom/server'`) – skplunkerin Jan 31 '17 at 20:18

How to render a react element using an html string?

2 Answers2

Linked