Question

133

How to render a react element using an html string?

rated 0 times [ 134] [ 1] / answers: 1 / hits: 63661 / 9 Years ago, fri, april 17, 2015, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

donovantyriqn

Add To Favorites

Follow

Total Points: 271

Total Questions: 98

Total Answers: 113

Location: Saint Vincent and the Grenadines

Member since Sat, Sep 11, 2021

3 Years ago

answered 9 Years ago jadyngraysons · Accepted Answer

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.