changing text in Flatlist for each item - react-native

Question

Hey guys I would like to know how to change text in each row of a Flatlist.
I want to be able to toggle between follow and unfollow.
Here's my code example :=>
this.state = {
FlatListItems : [
{"key": "MARIA", "image":require("./assets/image/maria.jpg")},
{"key": "MARTA", "image":require("./assets/image/marta.jpg")},
{"key": "MARTIN", "image":require("./assets/image/martin.jpg") },
{"key": "OLIVIA", "image":require("./assets/image/olivia.jpg") },
],
checked:true,
}'
And here's the checked function
checked=()=>{
if(checked==true)
{
this.checked.setState(true)
}
else{
this.checked.setState(False)
}
}
And here's the render function
<FlatList
contentContainerStyle={{
flexDirection: 'row',alignItems:'center',paddingLeft:10,borderTopRightRadius:10,borderTopLeftRadius:10,
flexWrap: 'wrap',}}
data={ this.state.FlatListItems }
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem={({item,key}) =><View style={{padding:5,borderTopRightRadius:10,borderTopLeftRadius:10,}}>
<ImageBackground source={item.image}
style={{height:230,width:185,borderTopRightRadius:10,borderTopLeftRadius:10}}
blurRadius={ Platform.OS == 'ios' ? 10 : 6 } >
<View style={{alignItems:'center',padding:20,backgroundColor:'rgba(0,0,12, 0.4)'}}>
<View style={{alignItems:'center',padding:20}}>
<Image source={item.image} style={{width: 90, height: 90, borderRadius: 60}}/>
</View>
<View style={{alignItems:'center',paddingTop:10}}>
<Text style={{fontSize:18,fontFamily:'CRC55',color:'white'}}>{item.key}</Text>
<Text style={{fontSize:22,fontFamily:'CRC55',color:'white',paddingTop:10}}>{item.key}</Text>
<View style={{backgroundColor:'white',width:185,height:10}}>
</View>
</View>
</View>
</ImageBackground>
{
!this.state.checked? <TouchableOpacity onpress={this.checked}
><Text style={{fontSize:20,alignItems:'center'}}>FOLLOWING</Text></TouchableOpacity>: <TouchableOpacity onpress={()=>{this.setState({checked:key})}}><Text style={{fontSize:20,alignItems:'center'}}>FOLLOW</Text></TouchableOpacity>
}
</View>
}
/>
My question is how can I toggle between follow and unfollow for each item in the Flatlist.

Answer 1

You can use directly this example. I have just used some code from offical docs. You keep each list item state separately. You can adjust this code easily for your needs
import React, { Component } from 'react'
import { Text, View, FlatList, TouchableOpacity } from 'react-native'
const data = [
{ "key": "MARIA", "title": "image MARIA", "id": 1 },
{ "key": "MARTIN", "title": "image MARTIN", "id": 2 },
{ "key": "OLIVIA", "title": "image OLIVIA", "id": 3 },
];
class MyListItem extends React.PureComponent {
state = {
selected: true
}
_onPress = () => {
this.setState({
selected: !this.state.selected
})
};
render() {
const text = this.state.selected ? "follow" : "unfollow";
return (
<TouchableOpacity onPress={this._onPress}>
<View>
<Text >
{this.props.title + " " + text}
</Text>
</View>
</TouchableOpacity>
);
}
}
export default class MultiSelectList extends React.PureComponent {
_keyExtractor = (item, index) => item.id;
_renderItem = ({ item }) => (
<MyListItem
id={item.id}
title={item.title}
/>
);
render() {
return (
<FlatList
data={data}
extraData={this.state}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
);
}
}