How to define different list items background images in react native? - react-native

Question

In my app, I want different cards have different background images, every image has a number text, and when I click the image it can increase the number by one. now I have them with same image background image, I do not know how to modify my code to meet this requirement. The following is my code:
const MyMeetupsList = ({meetups}) => (
<FlatList
data={meetups}
renderItem={({item}) => (
<View style={{marginLeft:8, marginTop: 8} }>
<View style={styles.meetupCard}>
<ImageBackground source={ require('../../../imgs/food-2.jpg')} style={{width: 175, height: 200}} blurRadius={6}>
<Text style={styles.gridItemText}>{item.title}</Text>
</ImageBackground>
</View>
</View>
)}
numColumns={2}
keyExtractor={item => item.title}
/>
);
Hope you can help! Thanks a lot!

Answer 1

You can use attribute extraData for tracking any change to the dataset and flatlist will rerender on any changes applied on data set. Here i added Map data set( Immutable.js) which can be used to track multiple data sets. If you have only one then you can put that data set straight away. handleClickAction is a function u need to define to mutate your data.
const MyMeetupsList = ({meetups}) => (
<FlatList
data={meetups}
extraData={Map({
foo: meetups, // here you can put any data sets u want to watch for render
})}
renderItem={({item}) => (
<View style={{marginLeft:8, marginTop: 8} }>
<View style={styles.meetupCard}>
<ImageBackground source={ require('../../../imgs/food-2.jpg')} style={{width: 175, height: 200}} blurRadius={6}
onPress = {()=>handleClickAction(item.id)} >
<Text style={styles.gridItemText}>{item.title}</Text>
</ImageBackground>
</View>
</View>
)}
numColumns={2}
keyExtractor={item => item.title}
/>
);
I hope above snippet helps