title: How to render a string with JSX in React
body: <p>I need to render an HTML (JSX) string in a React class. I don't know if this is possible or not.
  <em>dangerouslySetInnerHTML</em> is not valid for me because I have different react components inside this file. It's not plain HTML.</p>
  
  <p>I have an example with the expected result:
  <a href="https://jsfiddle.net/86rg50re/1/" rel="noreferrer">https://jsfiddle.net/86rg50re/1/</a></p>
  
  <pre><code>var MyComponent = React.createClass({
      propTypes: {
          owner: React.PropTypes.string
      },
  
      render: function() {
          return &lt;div&gt;Congrats {this.props.owner}! you have rendered MyComponent ({this.props.children})&lt;/div&gt;;
      }
  });
  
  var Hello = React.createClass({
      render: function() {
          return &lt;div&gt;Header &lt;MyComponent owner={"Daniel"}&gt;Yayyyyyy!&lt;/MyComponent&gt;&lt;/div&gt;;
      }
  });
  </code></pre>
  
  <p>But what I have is this:</p>
  
  <pre><code>var Hello = React.createClass({
      render: function() {
          var content = '&lt;div&gt;Header &lt;MyComponent owner={"Daniel"}&gt;Yayyyyyy!&lt;/MyComponent&gt;&lt;/div&gt;';
          return transformStringToJSX(content);
      }
  </code></pre>
  
  <p>Obviously <em>transformStringToJSX</em> doesn't exists.</p>
  
  <p>Is there a way to render jsx strings?</p>