I like to increase the count of Item 1 without changing the count of Item 2 and Item 3. How do I do that in React Native? I am a beginner.

Here is my code: (Never mind the AppText and AppButton component those are my own)

const items = [
        { id: 1 },
        { id: 2 },
        { id: 3 }
    ]

    const [quantity, setQuantity] = useState(1)

    return (
            <View style={styles.container}>
                <FlatList
                    data={items}
                    renderItem={({ item }) => (

                        <View style={styles.item}>

                            <AppText style={styles.number}>Item {item.id} |</AppText>

                            <View style={styles.buttonContainer}>
                                <AppButton title={"-"} type={"contained"} style={styles.button} onPress={() => setQuantity(quantity - 1)} />
                            </View>

                            <AppText style={styles.number}>{quantity}</AppText>

                            <View style={styles.buttonContainer}>
                                <AppButton title={" "} type={"contained"} style={styles.button} onPress={() => setQuantity(quantity   1)} />
                            </View>

                        </View>

                    )}
                />
            </View>

CodePudding user response：

Need to create a useState object to map the values

const items = [
    { id: 1 },
    { id: 2 },
    { id: 3 }
]

const [quantity, setQuantity] = useState({1: 0, 2: 0, 3: 0})


<View style={styles.container}>
            <FlatList
                data={items }
                renderItem={({ item }) => (

                    <View style={styles.item}>

                        <AppText style={styles.number}>Item {item.id} |</AppText>

                        <View style={styles.buttonContainer}>
                            <AppButton title={"-"} type={"contained"} style={styles.button} onPress={() => setQuantity((state) => ({...state,{[item.id] : state[item.id] - 1} })} />
                        </View>

                        <AppText style={styles.number}>{quantity[item.id] || 0}</AppText>

                        <View style={styles.buttonContainer}>
                            <AppButton title={" "} type={"contained"} style={styles.button} onPress={() => setQuantity((state) => ({...state,{[item.id] : state[item.id]   1} })} />
                        </View>

                    </View>

                )}
            />
        </View>

CodePudding user response：

• It's better to add a key-value in items object for quantity and handle that items state only (Don't depend on other state if we can handle the data that passed to FlatList).
• Also it's always better to maintain good code formatting for readability like don't handle functions directly in onPress instead create a separate function to handle that

Try below code

const initialItems = [
     { id: 1, quantity:0 },
     { id: 2, quantity:0 },
     { id: 3, quantity:0 }
]

const [items, setItems] = useState(initialItems)

const updateQuantity = (index, value) => {
   if(value < 0) return;
   const tempItems = [...items];
   tempItems[index].quantity = value
   setItems(tempItems)
}

return (
  <View style={styles.container}>
    <FlatList
      data={items}
      renderItem={({ item, index }) => (
        <View style={styles.item}>
          <AppText style={styles.number}>Item {item.id} |</AppText>
          <View style={styles.buttonContainer}>
            <AppButton title={"-"} type={"contained"} style={styles.button} onPress={() => updateQuantity(index, item.quantity - 1)} />
          </View>
          <AppText style={styles.number}>{item.quantity}</AppText>
          <View style={styles.buttonContainer}>
            <AppButton title={" "} type={"contained"} style={styles.button} onPress={() => updateQuantity(index, item.quantity   1)} />
          </View>
        </View>
      )}
    />
  </View>
)