Problems with scrolling

I am trying to use List, something like this

<AutoSizer>
  {({ height, width }) => (
    <List
      width={width}
      height={height}
      rowHeight={48}
      rowRenderer={({ index }) => (
        <div style={{ height: 48 }} key={index}>Item {index}</div>
      )}
      rowCount={rows.size}
    />
  )}
</AutoSizer>

But instead of smoothly scrolling I get terribly jerky on chrome 61.0.3163.100 https://www.screencast.com/t/I7yRYcu71 on FF 55.0.3 I had empty space at the end https://www.screencast.com/t/JOT1Bswz

Without AutoSizer the problem doesn’t disappear. I’m using the latest versions of react and react-virtualized.

What am I doing wrong? Who faced such a problem?

[TrySound]

@yuristrelets That’s because you should pass style and key (not index) props to your div. rowHeight should be set via component props.

      rowRenderer={({ style, key, index }) => (
        <div style={style} key={key}>Item {index}</div>
      )}

[LiranCohen]

In case anyone is having this issue, passing the style down to whatever actual div is rendered for the row is what fixed this for me.

I had originally passed down the style property to the row component, but I didn’t use that property anywhere in the row. I then passed it down to the base row component which passed the style to the actual div creating the row.

Hope this helps anyone else.