React-Warning-Keys in FlatList

0
votes

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.

2
react-native
Hey try and add key={index}(index as any unique value,userID should also work) to <TouchableOpacity>.May be that remove your warning. – Iva

2 Answers

1
votes

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.

1
votes

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>
}