title: Convert string to React JSX
body: <p><strong>Goal:</strong> I want to convert strings including React components into fully-functional JSX.</p>
  <p>The easier example, for which there are many solutions on Stack Overflow, is this:</p>
  <pre><code>render()
  {
    let txt = &quot;&lt;span&gt;&lt;b&gt;Hello World!&lt;/b&gt;&lt;/span&gt;&quot;;
  
    return &lt;div dangerouslySetInnerHTML={{__html: txt}}&gt;&lt;/div&gt;;
      //---OR---
    return ReactHtmlParser(txt); //using react-html-parser
      //---OR---
    return parse(txt); //using html-react-parser
  }
  </code></pre>
  <p>But if instead, <code>let txt = &quot;&lt;MyComponent/&gt;&quot;;</code>, where MyComponent is a custom React component, I cannot find a way for the browser to interpret that correctly.</p>
  <p>Using some methods, it will enter the DOM as lowercase <code>&lt;mycomponent&gt;&lt;mycomponent/&gt;</code>.  With other tricks, I can get it into the DOM as uppercase <code>&lt;MyComponent&gt;&lt;MyComponent/&gt;</code>.  But the browser will not interpret MyComponent as a React component, and will not execute the code inside.</p>
  <p>I'm not interested in the answer <code>React.createElement()</code> because I don't want to use this for one component at a time.  I want to parse long strings of JSX.</p>