Ad

Warning: Each Child In An Array Or Iterator Should Have A Unique "key" Prop. Check The Render Method Of 'search'

- 1 answer

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.

Ad

Answer

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.

Ad
source: stackoverflow.com
Ad