Implementing a counter in a React Native Flat List - reactjs

Question

Background
I'm building a screen for an app which displays a number of products brought from a firebase firestore collection. The way I display the products is via a FlatList, this is the code:
<FlatList
style={selected ? styles.visible : styles.hidden}
data={data}
renderItem={({ item }) => (
<View style={styles.container}>
<View style={styles.left}>
<Text style={styles.title}>{item.name}</Text>
<Text style={styles.description}>{item.description}</Text>
<Text style={styles.price}>${item.price}</Text>
<View style={styles.adder}>
<TouchableOpacity onPress={() => setCount(count - 1)}>
<Text style={styles.less}>-</Text>
</TouchableOpacity>
<Text style={styles.counter}>{count}</Text>
<TouchableOpacity onPress={() => setCount(count + 1)}>
<Text style={styles.more}>+</Text>
</TouchableOpacity>
</View>
</View>
<Image style={styles.right} source={{uri: item.image}}/>
</View>
)}
/>
Problem
As you can see, there's a counter in place for each item which the user can use to select how many units of the product they want to buy. The state is updated like this: const [count, setCount] = useState(0);
As you can see, this way of implementing the counter means that adding one unit of any product adds a unit of every product.
What I have tried
I've seen some people do this: setCount({counterA: 0, counterB: 0, etc.}) and update each counter, however as the number of products is always changing in the firebase document I can't hardcode the amount of counters I need.
Question
How can I edit my code so that it only affects the desired item?

Answer 1

The item in your renderItem function should be a separate component. In this separate component you will have a count that is scoped only to the component. So when the button is pressed on that component, only its count is incremented and not the others. The problem right now is you have one count that is on the parent component. After creating this new "counting" componenet, your FlatList will look something like:
<FlatList
style={selected ? styles.visible : styles.hidden}
data={data}
renderItem={({ item }) => (
<CountingComponent />
)}
/>