I'm rendering a list with react-window, all rows have the same size, but when I resize the window, the content disappears because the row's size is always the same.
I render my list items with an array of components:
this.state =
{
products: products.artigos.map((product, index) =>
(
<ProductListItem key={index}
id={product.id}
reference={product.ref}
/>
)),
}
...
<AutoSizer>
{({height, width}) =>
(
<List
className="list-group"
height={height}
itemData={this.state.products}
itemCount={this.state.products.length}
itemSize={/*Some function to get the height*/}
width={width}
>
{({index, style}) => {
return (
<div style={style}>
{this.state.products[index]}
</div>
);
}}
</List>
)}
</AutoSizer>
How can I get the component's height and set the itemSize?