React Native warning: each child in a list should have a unique 'key' prop

Question

I am creating a render function to display information from within an array. Everything is functioning completely fine, however when I run the project I get an warning saying that each child in the list requires a unique key. I researched all the reasons why this may be happening however I don't see why I am getting this warning. Please help me.

Here is the entire code, from setting the data and rendering the function, thank you:

this.state = {
feed: [{
    username: ["Its_Jess: ", "Animal_Luver: ", "Kyl3_Rayn3r: ", "Smith_Family: "],
    caption: ["The New Photoshoot was so much fun!", "AWWWW Look at them sleep!!", "Beautiful swim", "This photo is from our vacation <3"],
    coments: ["View All 49 Comments", "View All 19 Comments", "View All 69 Comments", "View All 4 Comments"],
    photo:[Pic1,Pic2,Pic4,Pic6],
    avatar:[Pic1,Ava1,Ava2,Ava3]
  }]
}
renderFeed = () => {
    return this.state.feed.map((card, index) => {
      return card.username.map((username, i) => {
        if(card.caption[i])
          return (
            <View>
            <TouchableHighlight 
            onPress={()=>this.toggleModal({photo:card.photo[i], avatar:card.avatar[i] ,caption:card.caption[i],username:card.username[i],coments:card.coments[i]})}
            underlayColor="white">
            <Card
            key={`${i}_${index}`}
image={card.photo[i]}
containerStyle={{borderRadius:10, marginRight:1, marginLeft:1,}}>
<View
    style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}
  >
  <View style={{ flexDirection: 'row'}}>
    <Avatar 
        key={card.avatar}
        size="small"
        rounded
        source={card.avatar[i]}
  />
    </View>
    <View style={{flexDirection:'row'}}>

    {this.state.isLiked[i] ?(
                        <Avatar
                  rounded
                  icon={{
                    name: 'heart-multiple-outline',
                    type: 'material-community',
                  }}
                  overlayContainerStyle={{
                    backgroundColor: '#ff4284',
                    marginLeft: 5,
                  }}
                  reverse
                  size="small"
                onPress={()=> this.toggleLike(i)}/>
    ) : (
     <Avatar
    rounded
    icon={{ name:'heart-multiple-outline', type:'material-community', color: '#ff4284'}}
   overlayContainerStyle={{marginLeft:5}}
   reverse
   size='small'
   onPress={()=> this.toggleLike(i)}/>
)}
   <Avatar
        reverse
        rounded
  icon={{ name:'comment-processing-outline', type:'material-community' }}
  overlayContainerStyle={{backgroundColor: '#dbdbdb',marginLeft:5}}
   size='small'/>
    </View>
  </View>
    { this.state.fontLoaded == true ? (
      <View style={{flexDirection:'row'}}>
<Text style={{fontFamily: 'MontserratB', color:'#bf00b9', marginTop:10}} key={username}>{username}</Text>
    <Text style={{fontFamily:'Montserrat', marginTop:10}} key={card.caption}>{card.caption[i]}</Text>
  </View>
            ) : (<Text> Loading...</Text>)
      }
          <Text style={{marginTop:4, color:'#878787'}} key={card.coments}>{card.coments[i]}</Text>
</Card>
</TouchableHighlight>
        </View>
          );
        return <React.Fragment />;
      });
    })
}
render(){
return (
<View>
{this.renderFeed()}
</View>
)}

Answer 1

The issue was in where I was declaring my key. I moved key={`${i}_${index}`} from the <Card> element up to the <View> element and now the warning is gone

Answer 2

It's always a good practice to assign each of the elements in the array with a unique key because Keys are necessary to improve performance of your React app. Please refer the below article to get the exact knowledge of why it's necessary. Keys