title: Insert React component into a String variable with html content
body: <p>I need to insert a React component into a String variable that contains html content.
  This variable will be render with dangerouslySetInnerHTML.</p>
  
  <p>I replace my placeholder "!#ShareButton" with the content of my React component, but it renders [object Object] instead of the component itself</p>
  
  <p>React component:</p>
  
  <pre><code>const ShareThis = ({ text }) =&gt; {
    return (
      &lt;div class="one-line"&gt;{text}&lt;/div&gt;
  )}
  
  export default ShareThis
  </code></pre>
  
  <p>var content (string variable with html content)</p>
  
  <pre><code>&lt;p&gt;Text 1&lt;/p&gt;
  !#ShareButton
  &lt;p&gt;Text 2&lt;/p&gt;
  </code></pre>
  
  <p>Page:</p>
  
  <pre><code>const htmlcontent = content.replace(/!#ShareThis/g,
    &lt;ShareThis
      text="Hello"
    /&gt;)
  
  return (
    &lt;div dangerouslySetInnerHTML={{ __html: htmlcontent }} /&gt;
  )
  </code></pre>
  
  <p>Result:</p>
  
  <pre><code>Text 1
  [object Object]
  Text 2
  </code></pre>
  
  <p><strong>Do you know how to insert a React component into a String variable with html content?</strong></p>