title: react - how do I get the size of a component child elements and reposition them
body: <p>I have a component, which arranges elements in a dynamic grid, something like this:</p>
  
  <pre><code>class GridComponent extends React.Component {
    render() {
      return &lt;div&gt;
        {items.map(function(item){
            return &lt;ItemComponent someData={item}/&gt;;
        })}
      &lt;/div&gt;
    }
  }
  </code></pre>
  
  <p>Now I want to position the <code>ItemComponents</code> based on some algorithm, which needs the individual <code>ItemComponents</code>dimensions.</p>
  
  <p>So I guess, I need to:</p>
  
  <ol>
  <li>Render all <code>ItemComponents</code></li>
  <li>Get the dimensions of all <code>ItemComponents</code> (which are only fixed after they have been rendered)</li>
  <li>Reposition the <code>ItemComponents</code> based on my algorithm</li>
  </ol>
  
  <p>So my question is how to this, or more specific:</p>
  
  <ul>
  <li>How do I execute some code when all <code>ItemComponents</code> have been rendered?</li>
  <li>How do I get the dimensions of the <code>ItemComponents</code> from within GridComponent?</li>
  <li>Should I then rerender the <code>GridComponent</code> with the calculated <code>ItemComponents</code> position or should I set the positions of the <code>ItemComponents</code> somehow directly?</li>
  </ul>