React-Warning-Keys in FlatList - react-native

Question

I have some FlatList in my render but I'm getting Unique Key warning, I tried to use keyExtractor as well but it didn't work for me.
here is my code :
<FlatList
data={this.state.itemWaiting}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item, index }) => (
<MatchTurnList
username={item.home_user.username}
opponent={item.away_user.username}
matches={item.round_results}
turnID={item.turn_id}
matchID={item.match_id}
userID={item.home_uid}
Rounds={item.round}
gameStatus={item.status}
onPress={() => console.log('hi')}
/>
)}
/>
and this is my warning :
Warning: Each child in a list should have a unique "key" prop.
Check the render method of MatchTurnList. See ..... for more information.
and here is my matchTurnList component :
return (
<TouchableOpacity onPress={onPress} activeOpacity={0.9} style={styles.gameStatus}>
<View style={{ flex: 2, justifyContent: 'center', alignItems: 'flex-start' }}>
<Text style={[globalStyles.mediumFont, globalStyles.lightColor, globalStyles.acmeFont, { margin: normalize(1) }]}>{username}</Text>
<View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
{a}
</View>
</View>
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={[globalStyles.fontRifficFree, globalStyles.largFont, { color: '#ffbd00' }]}>VS</Text>
</View>
<View style={{ flex: 2, justifyContent: 'center', alignItems: 'flex-end' }}>
<Text style={[globalStyles.mediumFont, globalStyles.lightColor, globalStyles.acmeFont, { margin: normalize(1) }]}>{opponent}</Text>
<View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
{b}
</View>
</View>
</TouchableOpacity>
);
could you please help me to find where my mistake is?
Thanks.

Answer 1

You should use flatlist like this
render(){
return(
<FlatList
data={this.props.data} //<- your data array
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
)
}
then use keyExtractor function in your component like this
_keyExtractor = (item, index) => String(item.yourID) //<- this id from your data.
and final _renderItem function like this
_renderItem = (item) => {
<View>
...your code to render UI...
</View>
}

Answer 2

Try my code.
you need to add key props in render method
<FlatList
data={this.state.itemWaiting}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item, index }) => (
<MatchTurnList
key={index}
username={item.home_user.username}
opponent={item.away_user.username}
matches={item.round_results}
turnID={item.turn_id}
matchID={item.match_id}
userID={item.home_uid}
Rounds={item.round}
gameStatus={item.status}
onPress={() => console.log('hi')}
/>
)}
/>
it will remove your warnings for uniques key.