title: Making an HTML string from a React component in background, how to use the string by dangerouslySetInnerHTML in another React component
body: <p>I'm trying to render LaTeX strings in a React project.
  Although I use the <code>react-mathjax</code> React components, I want to get an HTML string made from the LaTeX strings in order to concatenate it and the other strings and set it by dangerouslySetInnerHTML.</p>
  <h2>My current code I tried</h2>
  <p>Sample cod <a href="https://github.com/Nyoho/test-react-project/blob/component2string/src/components/tex.jsx" rel="nofollow noreferrer">here</a></p>
  <ol>
  <li>LaTeX strings are given as strings</li>
  <li>Make an empty DOM <code>aDom</code> by <code>document.createElement('span')</code> (in background. not in the document DOM tree.)</li>
  <li>Render a LaTeX string by <code>ReactDOM.render</code> into <code>aDom</code></li>
  <li>After rendering, get a string by <code>aDom.innerHTML</code> or <code>.outerHTML</code></li>
  </ol>
  <h2>Problem</h2>
  <p>The value of <code>aDom.innerHTML</code> (or <code>.outerHTML</code>) is <code>&quot;&lt;span&gt;&lt;span data-reactroot=\&quot;\&quot;&gt;&lt;/span&gt;&lt;/span&gt;&quot;</code> (almost empty)
  although <code>aDom</code> has a perfect tree that MathJax generated.</p>
  <p>Briefly,</p>
  <ol>
  <li><code>aDom</code>: </li>
  <li><code>aDom.outerHTML</code>: </li>
  </ol>
  <p><a href="https://i.stack.imgur.com/2Q2v8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2Q2v8.png" alt="enter image description here" /></a></p>
  <h2>Question</h2>
  <p>How can I get the 'correct' HTML string from <code>aDom</code> above?</p>