Simple List example using react-virtualized-CodePudding

I'm trying to get a very simple example of "react-virtualized" to work using the "List" method of display.

Here's what I have so far (omitting html/css here because it's trivial, see codepen for complete example):

https://codepen.io/darrengates/pen/eYMRbGr

const { List } = ReactVirtualized
const generateRandomItem = (idx) => ({
   id: idx,
   name: faker.name.findName()
})

class App extends React.Component {
   constructor () {
      super()
      this.renderRow = this.renderRow.bind(this)
      
      // fake data
      let items = []
      for (let i = 0, l = 1000; i < l; i  ) {
         items.push(generateRandomItem(i))
      }
      this.state = {
         items: items
      }
   }
   
   renderRow({index, key}) {
      const item = this.state.items[index];
      return (
           <div>{item.name}</div>
      )
   }
   
   render () {      
      return (
         <div >
            <h1>List Example</h1>
            <List
               width={600}
               height={300}
               rowHeight={40}
               rowCount={this.state.items.length}
               rowRenderer={this.renderRow}
            ></List>
         </div>
      )
   }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
)

If you start scrolling down the list, you'll soon see that data "farther down" the list does not appear in the container as it should - I only see white space where there should be additional rows of data.

This seems like the simplest possible example of React Virtualized using List. What am I doing wrong in this very simple example?

CodePudding user response：

You aren't passing the style parameter provided by the rowRenderer function:

 renderRow({index, key, style}) {
      const item = this.state.items[index];
      return (
           <div style={style}>{item.name}</div>
      )
   }