select one item from flatlist - react-native

Question

I created this list of items and I want to let user select one item and then change style of this item.
this is my approach:
class Gift extends React.Component {
constructor(props){
super(props)
this.titleUpValue = new Animated.Value(0);
this.state = {
isLoading: false,
listGifts: [
{
"id" : "1",
"type" : 'gift' ,
"etat" : 1,
"titreTransaction": "عدد الوحدات",
"contenuTrans": "400",
"dateTrans": "2019-07-31 17:47:31"
},
{
"id" : "2",
"type" : 'ba' ,
"etat" : 1,
"titreTransaction": "عدد الوحدات",
"contenuTrans": "1000",
"dateTrans": "2019-07-31 17:42:57"
},
{
"id" : "3",
"type" : 'ba' ,
"etat" : 1,
"titreTransaction": "عدد الوحدات",
"contenuTrans": "500",
"dateTrans": "2019-07-31 17:31:35"
},
}
],
itemId: null,
btnDisabled: true,
itemindex: null,
}
}
PressedItem = (itemId) => {
this.setState({ itemId: itemId, btnDisabled: false,})
}
renderItem = ({ item }) => {
return (
<TouchableOpacity
onPress={() => { this.setState({ itemindex: item.id, itemId: item.id, btnDisabled: !this.state.btnDisabled, }), console.warn('id > ' + this.state.btnDisabled) }}
style= {[
StylesGift.giftItem,
this.state.itemindex === item.id ? StylesGift.SelectedlistItem : StylesGift.UnselectedlistItem
]}>
<Image source={Images.gift1}
style={StylesGift.imageStyle}
resizeMode={'contain'}
/>
<View style= {StylesGift.footGift}>
<View style= {StylesGift.nameGiftContainer}>
<View style= {StylesGift.valueGiftContainer}>
<Text style= {StylesGift.valueGiftText}>200</Text>
</View>
<Text style= {StylesGift.nameGiftText}>الهدايا</Text>
<Text style= {StylesGift.nameGiftText}>{item.id}</Text>
</View>
</View>
<View style= {StylesGift.headGift}>
<View style= {StylesGift.icGiftContainer}>
<IconFA name="check" size={hp('1.6%')} color= {Colors.white} style={StylesGift.icGift}/>
</View>
</View>
</TouchableOpacity>
)
}
render() {
return (
<View style={Styles.listContainer}>
{
this.state.isLoading ?
<ActivityIndicator size='large' style={Styles.styleAI} color={Colors.mainYellow}/>
:
<FlatList
style={Styles.flatlist}
contentContainerStyle={Styles.flatContent}
data={this.state.listGifts}
keyExtractor={(item) => item.id.toString()}
renderItem={this.renderItem}
numColumns={2}
/>
}
</View>
);
}
}
export default Gift;
I dont use the PressedItem function for test, the consol.warn() in onPress show the last state not the current state.
for exemple when I click on the item with id = "1" it show me id > null when I click on the item with id = "2" then it show me id > 1... and the style deosn't change even with this condition:
this.state.itemindex === item.id ? StylesGift.SelectedlistItem : StylesGift.UnselectedlistItem
this is the 3 main Styles:
giftItem: {
width: wp('42%'),
height: hp('30%'),
alignItems: 'center',
backgroundColor: Colors.white,
borderRadius: wp('2%'),
overflow: 'hidden',
marginVertical: wp('2%'),
marginHorizontal: wp('2%'),
// borderWidth: 1, borderColor: 'blue',
},
UnselectedlistItem: {
elevation: 2,
borderWidth: 1, borderColor: 'red',
},
SelectedlistItem: {
elevation: 8,
borderWidth: 1, borderColor: 'blue',
},
I think my approach is logic and most work but I don't know what's wrong, states: itemindex and itemId doesn't change in setState

Answer 1

It's okey, I just had to add extraData={this.state} as parameter in flatlist for telling the flatlist to re-render
<FlatList
style={Styles.flatlist}
contentContainerStyle={Styles.flatContent}
data={this.state.listGifts}
keyExtractor={(item) => item.id.toString()}
renderItem={this.renderItem}
numColumns={2}
extraData={this.state}
/>