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

You need to use the `List.recomputeRowHeights` method. https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md#recomputerowheights-index-number — Tom Coughlin, Oct 11 '17 at 21:15
@TomCoughlin Hi, where and how do I call `recomputeRowHeights` or `forceUpdateGrid()` in a functional component? — yeln, Sep 29 '22 at 07:50

score 4 · Answer 1 · answered Mar 30 '18 at 10:11

4

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}
        .....
    />
}

answered Mar 30 '18 at 10:11

Srujan Reddy

730
1
6
27

Hi, how do I call `forceUpdateGrid()` in a functional component? – yeln Sep 29 '22 at 07:51

score 1 · Answer 2 · answered Feb 06 '17 at 09:58

1

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

answered Feb 06 '17 at 09:58

Yuriy M.

77
1

Could you add a plunker example? ( or modify my existing plunker and add the link). – Alin Ciocan Feb 06 '17 at 16:18

varaprasadh · Answer 3 · 2021-07-27T20:52:26.393

1

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

edited Jul 27 '21 at 20:52

answered Jan 23 '21 at 19:20

varaprasadh

488
5
13

1

Thank you a million ! I spent many days trying to solve that – hamdi islam Jun 30 '21 at 11:11

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

3 Answers3