Question: How to get the cumulated height from children component

Hi, really sorry about that weirdly formulated question. Please bear with me:

I have a component that loads a list of local directories and files inside a frame, a bit like a mac finder window, according to a selected base directory. So, depending on that arbitrary directory, the number of fetched files will vary and so the height of my frame will do too (until it reaches max-height).

Now, as soon as the content of the selected directory has been fetched, I want to spring open this component's frame dynamically to the right height (or max-height). And if I was to change the directory, I'd need the frame height to spring/adjust according to the number of elements fetched OR straight to the max-height.

Here is the relevant excerpt of the component:

      <Motion
        defaultStyle={{x: 30}}
        style={{x: spring(330, {stiffness: 270, damping: 17})}}
      >
        {({x}) =>  
          <List height={x}>
            {
              localTree.map(item =>
                <ListItem key={v4()}>
                  <FileIcon isDirectory={item.isDirectory} />
                  <span onClick={() => this.handleClick(item.id)}>
                    {item.baseName}
                  </span>
                </ListItem>
              )
            }
          </List>
        }
      </Motion>

You can see that, at the moment, the defaultStyle and style variables are statically set. It works fine, especially because I've set the <List /> component's style to overflow: scroll so that if there are more elements than 330px in this case, a little scrolling makes it naturally browsable.

But that is not what I ultimately want. I want thedefaultStyle={{x: 30}} and style={{x: spring(330, )}} to be dynamically set by the height of the cumulated number of <ListItem /> child elements.

How should I tackle this? Should I add a parent component somewhere?

chenglou / react-motion

Question: How to get the cumulated height from children component #479