Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of 'search'

Question

The search is perfect and it's all looks fine, but gets this warning.
I get this warning when I press any key to start the search method.
"Song_ID", "Song_Name" and "Image" are of the variable names from the SQL Database.
- I looked on other question as this, but it didn't help me at all.
This is the code where the error is :

return (
        <View>
          <ScrollView>
            {musicList.map(songObj => {
              return (
                <View style={styles.resultsContainer}> /// Its written that the erorr in this line
                  <TouchableOpacity onPress={this.GetListViewItem.bind(this, songObj.Song_Name)}>
                  <Text style={{ fontSize: 16 }} key={songObj.Song_ID}>
                  {songObj.Song_Name}</Text>
                    <Image source={{ uri: songObj.Image }} style={styles.img} />
                  </TouchableOpacity>
                </View>
              );
            })}
          </ScrollView>
        </View>
      );
    }

I don't understand where to put the key and/or what does it mean, I tried so many times but it didn't went well.
If more details is needed please tell me and I'll insert the right code.

Answer 1

You should add the key onto the outermost component inside the map. In your case, this is the View. Try this:

return (
        <View>
          <ScrollView>
            {musicList.map(songObj => {
              return (
                <View style={styles.resultsContainer} key={songObj.Song_ID}>
                  <TouchableOpacity onPress={this.GetListViewItem.bind(this, songObj.Song_Name)}>
                  <Text style={{ fontSize: 16 }}>
                  {songObj.Song_Name}</Text>
                    <Image source={{ uri: songObj.Image }} style={styles.img} />
                  </TouchableOpacity>
                </View>
              );
            })}
          </ScrollView>
        </View>
      );
    }

Adding the key prop lets react optimize rendering which is why it recommends you add it. Read the docs for more info.