react - how do I get the size of a component child elements and reposition them

Question

I have a component, which arranges elements in a dynamic grid, something like this:

class GridComponent extends React.Component {
  render() {
    return <div>
      {items.map(function(item){
          return <ItemComponent someData={item}/>;
      })}
    </div>
  }
}

Now I want to position the ItemComponents based on some algorithm, which needs the individual ItemComponentsdimensions.

So I guess, I need to:

1. Render all ItemComponents
2. Get the dimensions of all ItemComponents (which are only fixed after they have been rendered)
3. Reposition the ItemComponents based on my algorithm

So my question is how to this, or more specific:

• How do I execute some code when all ItemComponents have been rendered?
• How do I get the dimensions of the ItemComponents from within GridComponent?
• Should I then rerender the GridComponent with the calculated ItemComponents position or should I set the positions of the ItemComponents somehow directly?

Answer 1

That's a pretty cool idea and you can totally do this using internal state and a few React lifecycle methods. To answer each of your questions:

• the function componentDidMount will get called on the parent after all constructors and componentDidMount of every child, therefore here is a good place to call some function that maybe relies on your state
• by dimensions I assume you mean the screen width and height of the root component of ItemComponents therefore on componentDidMount in ItemComponent, you can set a ref and find the width and height of the DOM element
• the best solution would be to mount but not render the children (can be done with some initialization state variable or prop) and only render them once you've calculated their true final positions. For example, each ItemComponent can have a prop called initialized which is false until the parent finds where to place it.

Putting all of these together, since your algorithm will likely need all dimensions to work, you'll likely want to create a callback in your parent, let's call it setItemDimensions(id, width, height), which gets called on componentDidMount of each ItemComponent. You should be keeping a map of all your initialized ItemComponents and every time the setItemDimensions is called, check to see if there are any remaining (maybe initialize the map with all nulls and assume it's "ready" when there are no nulls left).

Once the last null is gone, you can run the algorithm, figure out the positions, and render the ItemComponents in the right place and with initialized={true} (or just initialized).

Let's see if that works!