React-window: Don't scroll to top on re-render

[bnikom]

Hello,

I'm currently trying to load a grid that contains an input checkbox in each cell.
Whenever I click on the checkbox I call a function on the onChange which sets State in the parent component.
Every time I click on the checkbox/setState, the Grid re-renders to the top of the grid.
Is there any way to return to the exactly position where I clicked on the checkbox, or somehow not re-render the FixedSizeGrid
while also passing in new props?
I know there is initialScrollTop, but it can't calculate the exact previous location of where I selected the checkbox.

Thank you very much for your help!
(i've included my code snippet below)

```const Cell = ({ data, columnIndex, rowIndex, style }) => {

const { list, list2, selectInput } = data;

return (

{list2[columnIndex + (4 * rowIndex)] &&

type="checkbox"
checked={stateInput === list2[columnIndex + (4 * rowIndex)]}
onChange={(e) => selectInput(e, list2[columnIndex + (4 * rowIndex)])}
/>

className="w-100"
src={list2[columnIndex + (4 * rowIndex)]}
/>

}

);
};

const Example = () => {
return (
columnCount={4}
columnWidth={190}
height={600}
rowCount={Math.ceil(trueCoverList.length / 4)}
rowHeight={250}
width={760}
>
{Cell}

);
}

[bvaughn]

Can you share a full repro (in Code Sandbox)? I don't really have time to recreate from snippets.

[bnikom]

of course.

I wrote up the basic example/scenario. Please let me know if you need anything else
https://codesandbox.io/embed/mznznkv0q8

Thank you

[bvaughn]

Ah. You're creating the components (the functions) within the render method. This doesn't really work because when your outer component re-renders, the inner types will be recreated and React will unmount and re-mount.

Also you'll want to pass your state as itemData so the grid cells will be re-rendered when state changes.

Here you go:
https://codesandbox.io/embed/mznznkv0q8