React - How to return HTML elements in JSON

Question

I have a JSON file containing HTML elements in a string. Is it possible to return data in React / JSX as display HTML?

var Hello = React.createClass({ render: function() { var exampleJSONData = { "item": "Hello", "text": "<p>Lorem ipsum</p><p>dolor sit amet</p>" } return <div>{data.item} {data.text}</div>; } }); 

Returns: Hello <p>Lorem ipsum</p><p>dolor sit amet</p> instead:

 Hello Lorem ipsum dolor sit amet 

fiddle

Answer 1

You can try dangerouslySetInnerHTML like this

 <div dangerouslySetInnerHTML={ {__html: data.text} } /> 

Example