How to notify List component that its row item height has changed?

[yelnyafacee]

I have a react-virtualized List, each item in the rows have an expand button, when the button is clicked the height of the row changes and it expands and show more info.

the issue here is, after the button got clicked the inner Grid (ReactVirtualizedGridinnerScrollContainer) CSS height property is not updating or the Gid is not re-rendering/notified of the changes in row height

What should I do to make it rerender the row everytime the row item height gets updated?

I tried using forceUpdateGrid() with useRef() but it does not seems to work? or maybe I did it wrong?

Sandbox code: https://codesandbox.io/s/agitated-pond-xq1csq?file=/pages/index.js

[codedaybyday]

you need use CellMeasurer and CellMeasurerCache, when someone item has update height, you should clear one of CellMeasurerCache, then rerender

[aleksandr-sidorov]

@yelnyafacee You should warp your list item with the CellMeasurer. It passes the measure render prop to your component so you can call it in a function that changes its layout.