React Native FlatList Display Same Value For All Items

Question

So basically I have a json file where I am rendering using Flatlist. So I have this part where it shows the quantity in the Flatlist. For example, Apple(4 quantity) or Orange(8 quantity). So, My issue is that if I increment the quantity for apples, even the quantity changes for banana. For example, I click 5 quantity for apples but it also updates 5 quantity for banana as well. So, What I want is to have seperate quantity for each food item.How can I fix this and is this even possible. I have the following code down here the Flatlist code:

<FlatList
      data={this.state.data}
      renderItem={({ item }) => (
        <View>
          <View style={styles.itemList}>
            <View style={styles.imageRender}>
              <Image
                source={{
                  uri:
                    "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/No_image_available.svg/1024px-No_image_available.svg.png",

                  // "https://thumbs.dreamstime.com/b/no-image-available-icon-photo-camera-flat-vector-illustration-132483296.jpg",
                  //
                  alt:
                    "https://thumbs.dreamstime.com/b/no-image-available-icon-flat-vector-no-image-available-icon-flat-vector-illustration-132482953.jpg",
                }}
                style={{ flex: 1, width: deviceWidth / 3.76 }}
              />
            </View>
            <TouchableOpacity
              
             onPress = {() => this.renderFoodName(item)}
            >
              <View style={styles.itemsRender}>
                <Text style={styles.itemName}>{item.foodName}</Text>

                <Text style={styles.itemPrice}>${item.price}</Text>
              </View>
            </TouchableOpacity>
            <View style={styles.quantityRender}>
              <View style={styles.alignSelfView}>
                <TouchableOpacity
                  style={styles.quantityButton}
                  onPress={this.IncrementItem}
                >
                  <Text style={styles.quantitySize}>+</Text>
                </TouchableOpacity>

                <Text style={styles.quantityNumber}>
                  {this.state.quantity}
                </Text>

                <TouchableOpacity
                  style={styles.quantityButton}
                  onPress={this.DecreaseItem}
                >
                  <Text style={styles.quantitySize}>-</Text>
                </TouchableOpacity>
              </View>
            </View>
          </View>
        </View>
      )}
    />
 

` Here is my quantity code which is already in the code above but I am putting this for neatness:

<View style={styles.quantityRender}>
              <View style={styles.alignSelfView}>
                <TouchableOpacity
                  style={styles.quantityButton}
                  onPress={this.IncrementItem}
                >
                  <Text style={styles.quantitySize}>+</Text>
                </TouchableOpacity>

                <Text style={styles.quantityNumber}>
                  {this.state.quantity}
                </Text>

                <TouchableOpacity
                  style={styles.quantityButton}
                  onPress={this.DecreaseItem}
                >
                  <Text style={styles.quantitySize}>-</Text>
                </TouchableOpacity>
              </View>
            </View>

` This is my functions and state:

constructor(props) {
super(props);
this.state = {
  foodInput: "",
  home: "flex",
  checkoutPage: "none",
  checkout: "",
  data: [],
  quantity: 0,
  show: false,
  foodCheckout: [],
};

IncrementItem = () => {
if (this.state.quantity >= 0) {
  this.setState({ quantity: Number(this.state.quantity + 1) });
}
if (this.state.quantity == 15) {
  Alert.alert("LIMIT REACHED! ", "You can only buy up 15 items per item", [
    {
      text: "I Understand!",
      style: "cancel",
    },
  ]);

  this.setState({
    quantity: Number(this.state.quantity + 0), // this one just adds 0 everytime
    //quantity:15 // this one set the updates the quantity to 15 each time
  });
}

};

DecreaseItem = () => {
if (this.state.quantity >= 1) {
  this.setState({
    quantity: Number(this.state.quantity - 1),
  });
}

};

It would be great if someone helped me on this :)

Answer 1

Your component has a single state.quantity. Each one of your rendered Items has a TouchableOpacity with onPress={this.IncrementItem}, which sets the component's state.quantity. This is your problem.

What you need is to have a state.quantity for each item rather than a single state.quantity that every item edits and renders.

I suggest making a component called Fruit (or whatever) that itself has a quantity state and renders a touchable opacity that can increment it. Then your flatlist renders a list of Fruit components that each manage their own state.