react native Flatlist renderItem not update

Question

I'm using FlatList and It displays all content properly.

But when I'm updating product quantity, it only increases total amount but nothing changes in renderItem of FlatList.

When I press on plus button, total amount is changed but product quantity is not.

How can I update the product quantity? Why the quantity of the FlatList item isn't changed, when the Total amount is updated?

My code:-

constructor(props) {
    super(props);
    this.state = {
        data:[
            {id:4, productName:'Product 4', shortDescription:'shortDescription 4', qty:1, price:500 },
            {id:5, productName:'Product 5', shortDescription:'shortDescription 5', qty:1, price:1000},
            {id:6, productName:'Product 6', shortDescription:'shortDescription 6', qty:1, price:1000},
        ],
    };
}

_addQty = (index) => {
    var data = this.state.data;
    data[index].qty = data[index].qty + 1;
    this.setState(data:data);
}


_getTotalPrice = () => {
    var total = 0;
    for (var i = 0; i < this.state.data.length; i++) {
        total += this.state.data[i].qty * this.state.data[i].price;
    };
    return total;
}


_renderItem = ({item, index}) => {
    var imageCloseWidth = 20;
    var margin = 5;
    var subViewWidth = width-(margin*3);
    return  <View key={index} style={{ marginBottom: margin, marginHorizontal: margin, marginTop: index==0?margin:0}}>
                <View style={{flexDirection: 'row', flex:1}}>
                    <View style={{justifyContent: 'space-between', width:subViewWidth+imageWidth}}>
                        <View>
                            <TouchableOpacity style={{position: 'absolute', right: 0}}>
                                <View><Image style={{height:imageCloseWidth, width:imageCloseWidth, tintColor: '#888888'}} source={MyConstants.imgClose} /></View>
                            </TouchableOpacity>

                            <Text style={[styles.txtProductName, {width:subViewWidth}]}>{item.productName}</Text>
                            <Text style={styles.txtSortDesc}>{item.shortDescription}</Text>
                        </View>
                        <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginTop:5}}>
                            <View style={{flexDirection: 'row', alignItems: 'center'}}>
                                <TouchableOpacity>
                                    <View><Image style={{height:20, width:20, tintColor: item.qty>1 ? "#888888":"#BBBBBB"}} source={MyConstants.imgMinus} /></View>
                                </TouchableOpacity>
                                <Text style={{marginHorizontal: 5, fontSize: 18}}>{item.qty}</Text>

                                <TouchableOpacity
                                    onPress={ ()=> {
                                        this._addQty(index);
                                    }}>
                                    <View><Image style={{height:20, width:20, tintColor: '#888888'}} source={MyConstants.imgPlush} /></View>
                                </TouchableOpacity>

                            </View>
                            <Text style={{marginHorizontal: 5, fontSize: 18}}>{item.price}</Text>
                        </View>
                    </View>
                </View>
            </View>
}


render() {
    return (
        <View style={styles.container}>
            <FlatList
                renderItem={this._renderItem}
                keyExtractor={ (item,index) => index.toString() }
                data={this.state.data} />
            <View style={{flexDirection:'row', justifyContent: 'space-between'}}>
                <Text style={{flex:3, fontSize: 18}}>Total amount</Text>
                <Text style={{flex:1, fontSize: 18, textAlign:'right'}}>{this._getTotalPrice()}</Text>
            </View>
        </View>
    )
}

Answer 1

You might want to add the extraData prop to the flatlist:

<FlatList
  renderItem={this._renderItem}
  keyExtractor={ (item,index) => index.toString() }
  data={this.state.data}
  extraData={this.state}
/>

FlatList extraData:

A marker property for telling the list to re-render (since it implements PureComponent). If any of your renderItem, Header, Footer, etc. functions depend on anything outside of the data prop, stick it here and treat it immutably.

Find it here