0

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?

0 Answers0