react use dangerouslySetInnerHTML to render json with html tags

React is complaining about the use of dangerouslySetInnerHTML in conjunction with safe react children, that happened when you let the div tag opened to such characteristic <div>open and ready for children</div>.

Since you are using the JSX syntax extension, the solution here is write the whole sentence in a single line:

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

or just using a singleton div tag:

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

By the way you are not getting the error on jsbin because it is a react production build, this build is not meant to tell you what could be written better.

Remove the enclosing tag of your div element in your component so that it looks like the following code:

<li key={i}>    <div dangerouslySetInnerHTML={{      __html: item.text     }} /></li>