CODEWITHSUNDEEP
reactjsreact-native
ugrdursun
ugrdursun

Reputation: 369

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

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.

Upvotes: 1

Views: 202

Answers (1)

Israel Nascimento
Israel Nascimento

Reputation: 680

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?

Upvotes: 1

Related Questions