I'm trying to use react-window and react-virtualized-auto-sizer to virtualize a components list, but the <AutoSizer> component isn't rendering the list.

this is the code:

<AutoSizer>
     {({height, width}) => 
     (
     <List
          className="List"
          height={1000}
          itemCount={products.artigos.length}
          itemSize={35}
          width={width}
     >
     {
       products.artigos.map((product) =>
       (
          <ProductListItem
               id={product.id}
               reference={product.ref}
               name={product.name}
               image={product.image}
               onClick={this.renderProduct.bind(this)}
           />
        ))
    }   
     </List>
  )}
</AutoSizer>

EDIT

I changed the libraries to import { List, AutoSizer } from 'react-virtualized'; and the list script:

<div style={{ flex: '1 1 auto' , height: '100vh' }}>
    <AutoSizer>
        {({height, width}) => 
        (
            <List
                className="List"
                height={height}
                rowCount={products.artigos.length}
                rowHeight={35}
                width={width}
                rowRenderer={this.getProducts.bind(this)}
            />
        )}
    </AutoSizer>
</div>

where rowRenderer value is a function that returns the array:

getProducts()
{
    return products.artigos.map((product, index) =>
    (
        <ProductListItem key={index}
            id={product.id}
            reference={product.ref}
            name={product.name}
            image={product.image}
            onClick={this.renderProduct.bind(this)}
        />
    ))
}

Try one of both solutions:

1) There's a problem in the height of the component, preventing it from being displayed:

Wrap <AutoSizer> within a block with a height, e.g. height: 100vh;

<div style={{ flex: '1 1 auto' , height: '100vh' }}>
  <AutoSizer>
  {/* ... */}
  </AutoSizer>
</div>

2) If this doesn't work, remove the package react-virtualized-auto-sizer and install instead react-virtualized (through npm).

Once done, don't forget to fix the import, that is, import <AutoSizer> from the new library

import { AutoSizer } from 'react-virtualized';