How to notify List component that one item has changed the size?

Question

I would like to render a list of items using react-virtualized, however some of the items could change the size.

I have added a demo, where each item has a button and when someone clicks the button then the item needs to expand and push the below items lower: https://plnkr.co/edit/GG2bSIC5M1Gj7BR1pOii

The use case is similar to facebook posts, when someone comments it will expand the post and push the other posts lower.

ReactDOM.render(
<List
className='List'
autoHeight
width={300}
height={400}
rowCount={list.length}
rowHeight={30}
rowRenderer={
  ({ index, isScrolling, key, style }) => (
    <div
      className='Row'
      key={key}
      style={style}
    >
      {list[index]}
      <Expander />  /* contains the button, which when click it will expand more text*/
    </div>
  )
}
/>,
document.getElementById('example')

Is any way to achieve this?

UPDATE

I am realizing that there must be a way to force the List to update items and recalculate positions. There is an example with InfiniteLoader (react-virtualized example) which is using registerChild in the List as a ref. And it seems that when InfiniteLoader receives answer from the server it capable of forcing list to re-render rows.

I have tried another example with forceUpdate on list, however the List is still not updating.

https://plnkr.co/edit/RftoShEkQW5MR5Rl28Vu

Answer 1

As per the Documentation forceUpdateGrid() should be called instead of forceUpdate().

https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md#public-methods

I faced the similar issue and solved it by calling forceUpdateGrid() inside componentWillReceiveProps method.

componentWillReceiveProps(){
    this.refs.forceUpdateGrid();
}

render(){
    <List
        ref={ref => this.refs = ref}
        .....
    />
}

Answer 2

Try using Collection from react-virtualized instead of List. It should help :)

Answer 3

add key={Math.random()} the parent of the list item solved my issue.

<ListWidget key={Math.random()}>
  <Autosizer>{
     .....
     <List
      .....
      />
    .....
   }</Autosizer>
</ListWidget>

Note: not recommended, it's just a workaround to get PR accepted