How to access specific index of FlatList in react native - react-native

Question

I am populating a FlatGrid from API. Each grid has an icon which is by default green color. I want to change the color of a specific icon when pressed. But as of now after pressing the icon, the color of all the icons are changing. Can anyone suggest what needs to be done? Attaching the code for reference. After pressing the icon green color should turn into blue.
constructor(props){
super(props);
this.state={
isLoading: true,
dataSource: null,
color:'green'
}
}
colorChange(color)
{
if(color=='green')
{
this.setState({
color:'blue'
})
}
else
{
this.setState({
color:'green'
})
}
}
render(){
if(this.state.isLoading){
return (
<View style={styles.container}>
<ActivityIndicator size="large" />
</View>
)
}else{
console.log(this.state.dataSource)
return(
<ScrollView>
<FlatGrid
itemDimension={130}
items={this.state.dataSource}
style={styles.gridView}
renderItem={({ item, index }) => (
<View style={{borderWidth:1,borderStyle:'dashed',borderRadius:1,width:120,height:50,flexDirection:'row'}}>
<Text style={{fontSize:20,paddingLeft:10}}>{item.Name}</Text>
<Icon
name="car"
size={30}
key={item.Name}
style={{color:(item.Status=='Available'?this.state.color:'grey'),paddingLeft:20,backgroundColor:'white'}}
onPress={this.colorChange.bind(this.state.color)}
/>
</View>
)}
keyExtractor={item => item.Name}
/>
</View>

Answer 1

You can do an array of colors but that's not a good practice.
The other solution is to handle the renderItem as a functional component since that's how it works.
Like this
renderItem={({ item, index }) => {
const [color, setColor] = React.useState('green')
return(
<View style={{borderWidth:1,borderStyle:'dashed',borderRadius:1,width:120,height:50,flexDirection:'row'}}>
<Text style={{fontSize:20,paddingLeft:10}}>{item.Name}</Text>
<Icon
name="car"
size={30}
key={item.Name}
style={{color:(item.Status=='Available'?color:'grey'),paddingLeft:20,backgroundColor:'white'}}
onPress={() => setColor('blue')}
/>
</View>
)}}