I really don't understand what I'm doing wrong, going by the docs.
Explanation to the title:
When I scroll from 1 to 2 (i.e - 1 is now hidden) - everything's fine.
When I scroll from 2 to 3 (i.e - 1 and 2 are now both hidden) - The List jumps, so it doesn't begin from item 3, it begins with item 4 instead!
When I scroll all the way down, I have the remainder of all the skipped items, which means there's an empty space in which no item is present .
here's my code:
class MyList extends React.Component {
rowRenderer = (params: any): JSX.Element => {
const color = params.index % 2 ? 'white' : 'blue';
return (
<div style={{height: 50, backgroundColor: color}}>
{this.items[params.index]}
</div>
);
}
render() {
<div style={{height: 300}}>
<List
height={300}
width={235}
rowHeight={50}
rowCount={this.items.length}
rowRenderer={this.rowRenderer}
/>
</div>
}
}