title: Render multiple React components into a single DOM element
body: <p>I'm looking to render multiple modals into a single ReactDOM element. Here's the HTML structure that React renders to.</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="modal-socket"&gt;&lt;/div&gt; // Insert multiple here
      &lt;div id="wrapper"&gt;
          // Other content goes here
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>There's a long story behind why I need to render multiple components into #modal-socket but I want to do something akin to this:</p>
  
  <pre><code>ReactDOM.render(&lt;AddMeasurableModal /&gt;, document.getElementById("modal-socket"));
  ReactDOM.render(&lt;AddMeasurableModal /&gt;, document.getElementById("modal-socket"));
  ReactDOM.render(&lt;AddMeasurableModal /&gt;, document.getElementById("modal-socket"));
  </code></pre>
  
  <p>Obviously this replaces the current content of #modal-socket on each render call.. So I don't get my end result. Boo.</p>
  
  <p>Did a search and found a few answers on it but none meet my needs.</p>
  
  <p>Cheers.</p>