title: react use dangerouslySetInnerHTML to render json with html tags
body: <p>I am trying to render a json list with html tags in the string in a list as follows <a href="https://jsbin.com/deqiqeb/edit?js,console,output" rel="nofollow noreferrer">jsbin</a>. It works in Jsbin. But in my console I got warning below:</p>
  
  <pre><code>warning  Only set one of `children` or `props.dangerouslySetInnerHTML` react/no-danger-with-children
  </code></pre>
  
  <p>just wonder if there is other way to render the list with dangerouslySetInnerHTML to avoid the warning?</p>
  
  <pre><code>const displayList = [
      {
          item: 1,
          text: "&lt;strong&gt;ABC&lt;/strong&gt; this should be strong."
      },
      {
          item: 2,
          text: "&lt;a&gt;ABC&lt;/a&gt; this should be link."
      },
      {
          item: 3,
          text: "normal text"
      }
  ];
  
  const App = () =&gt; (
      &lt;ul&gt;
          {displayList.map((item, i) =&gt; (
              &lt;li key={i}&gt;
                  &lt;div dangerouslySetInnerHTML={{
                      __html: item.text
                  }}&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
          ))}
      &lt;/ul&gt;
  );
  
  ReactDOM.render(
      &lt;App /&gt;,
      document.getElementById('root')
  );
  </code></pre>