Accepted answer

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.


Add inline comment on top of dangerouslySetInnerHTML and inside div element if you use ESLint

   // eslint-disable-next-line react/no-danger
   dangerouslySetInnerHTML={{ __html: html }}


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
     }} />

According to this, it should remove the warning.

Related Query

More Query from same tag