React native list Each child in a list should have a unique "key" prop

Question

I am simply trying to do a venues list.

Here is the result of console.log(this.state.venues):

Array [
    Object {
        "key": "5b0ac89e***",
        "venuename": "Venue1",
    },
    Object {
        "key": "557d70asd****",
        "venuename": "Venue2",
    },
    Object {
        "key": "58f316ccsa****",
        "venuename": "Venue3",
    },
]

I am creating this data by pulling it from fq-api like this:

for (var i=0; i < 5; i++) {
    this.state.venues.push({
        venuename: response.data.response.groups[0].items[i].venue.name,
        key: response.data.response.groups[0].items[i].venue.id
    });
}

And here is my JSX:

<View style={styles.list}>
    <FlatList data={[this.state.venues]}
              renderItem={({item}) => <Text style={styles.item}>{item.venuename}</Text>}
              keyExtractor={(item, index) => item.key} />
</View>

I am receiving Each child in a list should have a unique "key" prop Error. Everything seems ok to me, I don't understand why it fails. I don't know what is this "key prop", I have it from fetch and tried to use it but I can't proceed.

Thanks for your help.

Is item.key always set? keyExtractor={(item, index) => item.key} — Carl Markham
Are you sure it should be data={[this.state.venues]}? Because venues is already an array, so it sounds like you should have data={this.state.venues}. — Ghassen Louhaichi
You are right, I missed that. Much appreciated! @GhassenLouhaichi — ugrdursun

Israel Nascimento Israel Nascimento · Accepted Answer · 2019-10-02T21:27:52

Your error is in your data prop.

You're putting a bi-dimensional array to the data prop, so the keyExtractor will try to extract: [].key (undefined) instead item.key...

I think you're also rendering only one item on the list because of the bidimensional array, I'm correct?

React native list Each child in a list should have a unique "key" prop

1 Answers