React-Virtualized List skips rows when scrolling

Question

I'm having an issue when I try to render a list of items as follows:

render()
{
  const data = (my data);

  const cellRenderer = ({index, key}) => (
    <li key={key}>
      <Datum data={data[index]} />
    </li>
  );

  return (
    <AutoSizer>
      {
        ({ width, height }) => (

          <CellMeasurer cellRenderer={ cellRenderer } 
                        columnCount={ 1 }
                        width={ width }
                        rowCount={ transactions.length }>
            {
              ({ getRowHeight }) => (
                <List height={ height }
                      overscanRowCount={ 50 }
                      noRowsRenderer={ () => (<div> Nix! </div>) }
                      rowCount={ transactions.length }
                      rowHeight={ getRowHeight }
                      rowRenderer={ cellRenderer }
                      width={ width } />
              )
            }
          </CellMeasurer>
        )
      }
    </AutoSizer>
  );
}

Now when I scroll down it skips every second list-item, until I end up with half the page empty but still scrollable.

When scrolling up it's even worse, it skips half the page.

AutoSizer and CellMeasurer seem to be working fine. I stepped through the code a bit, and it looks like they do create the correct measurement.

My data is just a static array of objects. Not a promise or stream.

I also changed my Datum component a few times to make sure it's completely static markup but that didn't change anything.

Any ideas anybody?

[edit]

Here's a Plunker showing my problem: https://plnkr.co/edit/2YJnAt?p=preview

Ironically, while fiddling with it, I accidentally figured out what I had done wrong. I'll submit an answer with my solution.

Answer 1

Right, I found the problem (and so did @MBrevda! +1!)

The rowRenderer method takes a style that needs to be applied to the rendered list element: https://plnkr.co/edit/FzPwLv?p=preview