weird html rendering issue with react

Question

I'm trying to render the message with html tags inside it. The rendering is working fine if the string is passed as prop, but when the same is passed from a variable the display text has encoded text.

Any idea how do I get it working in both scenarios.?

class Hello extends React.Component {
  render() {
    console.log(this.props.name)
    return <div>{this.props.name}</div>;
  }
}

ReactDOM.render(
  <Hello name="&lt;p&gt;How are you?&lt;/p&gt;" />,
  document.getElementById('container') --> **<p>How are you?</p>** 
);


class HelloOther extends React.Component {
  render() {
    const name = "&lt;p&gt;How are you?&lt;/p&gt;" 
    return <Hello name={name} />;
  }
}

ReactDOM.render(
  <HelloOther />,
  document.getElementById('container2') -- &lt;p&gt;How are you?&lt;/p&gt; -- > why?
);

Fiddle link - https://jsfiddle.net/d6s7be1f/2/

Answer 1

class Hello extends React.Component {
  createMarkup() {
    return {__html: this.props.name};
  }
  render() {
    return <div dangerouslySetInnerHTML={this.createMarkup()} />;
  }
}