React - How to return HTML elements in JSON

Question

I have a JSON file that contains HTML elements in a string - Is it possible to return the data in React/JSX as valid rendered 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 of:

Hello Lorem ipsum dolor sit amet

fiddle

Oleksandr T. · Accepted Answer · 2016-01-28 06:25:17Z

19

You can try use dangerouslySetInnerHTML like this

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

Example

answered Jan 28, 2016 at 6:25

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user6198643 Over a year ago

Thanks, I had forgotten about this dangerouslySetInnerHTML

Collectives™ on Stack Overflow

React - How to return HTML elements in JSON

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related