title: How to use ReactDOM.render inside a loop?
body: <p>I am trying to calculate the height of a component before it is previewed to the user. I found the following method online :</p>
  <pre><code>const measureElement = element =&gt; {
    // Creates the hidden div appended to the document body
    const container = document.getElementById('temporal-root')
  
    // Renders the React element into the hidden div
    ReactDOM.render(element, container)
  
    // Gets the element size
    const height = container.clientHeight
    const width = container.clientWidth
  
    return { height, width }
  
    return { height: 0, width: 0 }
  }
  </code></pre>
  <p>And this is how I use it:</p>
  <pre><code>  highlightsMemoized.forEach(section =&gt; {
          const sectionHeight =
            measureElement(
              &lt;ComponentSection
                section={section}
                style={{ width: '350px' }}
              /&gt;
            ).height 
          
        })
  </code></pre>
  <p>The problem is that <code>height</code> has always the same value, which is the one of the latest item in the loop. Is there a way to get the correct height pf each item using this approach?</p>