how do I handle dynamic height ?

[G3z]

I have a list of rows and they are uniform in size (233px) but based on user intervention a row can grow (to 723px) I thought this was the right way to do it but it seems I was wrong (I think the row size is not re-calculated if the item is in view) so how do I handle dynamic height ?

class CP extends React.Component {
    renderItem(index, key) {
        let product = this.state.products[index];

        return <ProductItem
            order={this.state.order}
            key={key}
            onOpen={()=>{
                product.open = !product.open;
            }}
            item={product} />;
    }

    itemSizeGetter(index){
        let product = this.state.products[index];
        return product.open ? 723 : 273;
    }

    render(){
        <div className='products_list'>
            <ReactList
                itemRenderer={this.renderItem.bind(this)}
                itemSizeGetter={this.itemSizeGetter.bind(this)}
                length={this.state.products.length}
                type='variable'
                threshold={200}
                useTranslate3d
            />
        </div>
    }
}

[caseywebdev]

Looks like your toggling the product.open but you're not telling React to re-render anything. You might want to try something like this to get the list to re-render and re-run the itemSizeGetter function.

class CP extends React.Component {
    renderItem(index, key) {
        let product = this.state.products[index];

        return <ProductItem
            order={this.state.order}
            key={key}
            onOpen={()=>{
                product.open = !product.open;
                this.list.forceUpdate();
            }}
            item={product} />;
    }

    itemSizeGetter(index){
        let product = this.state.products[index];
        return product.open ? 723 : 273;
    }

    render(){
        <div className='products_list'>
            <ReactList
                ref={c => this.list = c}
                itemRenderer={this.renderItem.bind(this)}
                itemSizeGetter={this.itemSizeGetter.bind(this)}
                length={this.state.products.length}
                type='variable'
                threshold={200}
                useTranslate3d
            />
        </div>
    }
}