Question 33969 in React native Question posted in
The official React Native documentation can be found here.

How to change item state on FlatList without affecting other items on React Native

enter image description here

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0
    • 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>
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search