title: Inject JSX-formatted string into React Component
body: <p>I have a small react page that should compile and display html string.
  the html in the string written in <a href="https://react.foundation/" rel="nofollow noreferrer">react-foundation</a> </p>
  
  <p>The page looks like this :</p>
  
  <pre><code>import * as React from 'react';
  import * as ReactDOM from 'react-dom';
  import { Link, Button, Colors } from 'react-foundation';
  require('./foundation.css')
  
  var htmlFromApi = '&lt;div className="button-basics-example"&gt;&lt;Button color={Colors.SUCCESS}&gt;Save&lt;/Button&gt;&lt;Button color={Colors.ALERT}&gt;Delete&lt;/Button&gt;&lt;/div&gt;';
  
  var App = ({ html }) =&gt; { return &lt;div&gt;{html}&lt;/div&gt; }
  
  ReactDOM.render(
  &lt;App html={htmlFromApi}/&gt;,
  document.getElementById('react')
  );
  </code></pre>
  
  <p>The Result of the above code is just a string, I am wondering if there is a way to convert the html string to react element </p>
  
  <p>something like this :</p>
  
  <pre><code>var reactElement= toReactElement(htmlFromApi);
  //the result is &lt;div className="button-basics-example"&gt;&lt;Button color={Colors.SUCCESS}&gt;Save&lt;/Button&gt;&lt;Button color={Colors.ALERT}&gt;Delete&lt;/Button&gt;&lt;/div&gt;
  </code></pre>
  
  <p>PS I tried  <code>&lt;div className="content" dangerouslySetInnerHTML={{ __html: htmlFromApi }}&gt;&lt;/div&gt;</code> and didn't work</p>
  
  <p>Thanks in advance</p>
  
  <p>Edit: the code is <a href="https://codepen.io/anon/pen/oeddYN?editors=1111" rel="nofollow noreferrer">here</a> </p>