React-window: Unexpected behavior, when try to scroll

[Ba-stian]

Hello.
I'm trying to use this library, to optimize render in table.
I take data from back, then I iterate it with few cycles and wrap in markup.
After that I return from this function Array with table markup, like this:

function createTableBody(data) {
    let Table = [];
    let row = [];
    for (let key in data) {
        if (key === 'product') {
            row.push(<div className="row">{data[key]}</div>);
            Table.push(<div className="cell">{row}</div>)
        }
    }
    return Table;
}

Then I make Row component:

const Row = ({index}) => (<div key={index}>{this.createTableBody()[index]}</div>);

After that I wrapp it in FixedSizeList:

<FixedSizeList itemSize={52}
         width={2100}
         itemCount={total}
         height={520}
         >
            {Row}
</FixedSizeList>

So then I open browser, and what I see?
When I try to scroll few times, about in third time all began twitch/wink

And in inspector I see infinite render

Sorry, if my question dummy.
Will happy any help.

[bvaughn]

You are not using the style parameter, which is how this library positions rows. You must use this parameter :smile:

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);