Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React - How to return HTML elements in JSON

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

like image 562
user14439 Avatar asked Jan 28 '16 06:01

user14439


1 Answers

You can try use dangerouslySetInnerHTML like this

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

Example

like image 75
Oleksandr T. Avatar answered Sep 19 '22 19:09

Oleksandr T.