title: How to parse html to React component?
body: <p>This is my senario :<br>
  1. Application request CMS(Content management system) for page contents.<br>
  2. CMS return <code>"&lt;div&gt;Hi,&lt;SpecialButton color="red"&gt;My Button&lt;/SpecialButton&gt;&lt;/div&gt;"</code><br>
  3. Application consume the content, render corresponding component with data provided in attribute.</p>
  
  <p>I can't figure out how to do <strong>step 3</strong> in React way, any advice is appreciated.  </p>
  
  <p>Thanks @Glenn Reyes, here's a <a href="https://codesandbox.io/s/5Q5mv2Rq" rel="noreferrer">Sandbox</a> to show the problem.
  </p>
  
  <pre><code>import React from 'react';
  import { render } from 'react-dom';
  
  const SpecialButton = ({ children, color }) =&gt; (
    &lt;button style={{color}}&gt;{children}&lt;/button&gt;
  );
  
  const htmlFromCMS = `
  &lt;div&gt;Hi, 
    &lt;SpecialButton color="red"&gt;My Button&lt;/SpecialButton&gt;
  &lt;/div&gt;`;
  
  const App = () =&gt; (
    &lt;div dangerouslySetInnerHTML={{__html: htmlFromCMS}}&gt;
    &lt;/div&gt;
  );
  
  // expect to be same as
  // const App = () =&gt; (
  //   &lt;div&gt;Hi, 
  //     &lt;SpecialButton color="red"&gt;My Button&lt;/SpecialButton&gt;
  //   &lt;/div&gt;
  // );
  
  render(&lt;App /&gt;, document.getElementById('root'));
  </code></pre>
  
  <p><a href="https://www.paddingleft.com/Vue-CMS-integration-demo/" rel="noreferrer">Here is a live demo</a> made by Vuejs. String <code>"&lt;div v-demo-widget&gt;&lt;/div&gt;"</code> could be treat as Vuejs directive and rendered. <a href="https://github.com/Asing1001/Vue-CMS-integration-demo/blob/master/src/main.js" rel="noreferrer">Source Code</a>.</p>