How to expand an accordion list in react-virtualized?

Question

I'm trying to create a virtualized accordion list with expandable rows but when I click on a row it doesn't push the list down : the data is instead displayed under the next accordion row.

I tried several answers from stackoverflow but none seems to work for me.

Some have suggested to use recomputeRowHeights() but I have no idea how to add it to my code

Any Help would be really appreciated, I have been stuck on this for days.

Here is my code :

import React from "react";
import {List, 
AutoSizer,
CellMeasurer,
CellMeasurerCache} from "react-virtualized";
import faker from "faker";
import {Accordion, Card} from 'react-bootstrap';

export default function BigList(){
const cache = React.useRef(
  new CellMeasurerCache({
  fixedWidth: true,
  defaultHeight: 100,
}));


const [people, setPeople] = React.useState([]);
const [time, setTime] = React.useState(new Date());


React.useEffect(()=>{
  setPeople(
    [...Array(10000).keys()].map(key => {
      return {
        id: key,
        name: `${faker.name.firstName()} ${faker.name.lastName()}`,
        bio: faker.lorem.lines(Math.random() * 100),
      }
    })
  )
}, []); 


React.useEffect(() => {
  const interval = setInterval(()=>{
    setTime(new Date())
  }, 1000);

  return () => clearInterval(interval);


}, []);
 


return( 

<div>
    
  <h1> {time.toISOString()}</h1>
    <div style={{width:"100%", height:"100vh" }}>
      <AutoSizer>{({width, height})=>
      <List 
          width={width} 
          height={height} 
          rowHeight= {cache.current.rowHeight}
          deferredMeasurementCache={cache.current} 
          rowCount={people.length} 
          rowRenderer={({key, index, style, parent})=>{
            const person = people[index];

            return (
            <CellMeasurer 

             key={key} 
             cache={cache.current} 
             parent={parent} 
             columnIndex={0} 
             rowIndex={index}>

            <div style={style}>
                <Accordion>
                  <Card>
                    <Accordion.Toggle as={Card.Header} eventKey={person} >
                    {person.name}<i>+</i>
                    </Accordion.Toggle>
                    <Accordion.Collapse eventKey={person}>
                      <Card.Body>
                        <p>{person.bio}</p>        
                      </Card.Body>
                    </Accordion.Collapse>
                  </Card>
                </Accordion>

            </div>

            </CellMeasurer>
            );

          }}
          /> }
          
          </AutoSizer>
      </div>
</div>
)};

Answer 1

recomputeRowHeights on toggle change, and do that after accordion animation