I'm trying to render a FlatList from json fetched from an api, but I keep getting this error:
Warning: Each child in an array or iterator should have a unique "key" prop.
Check the render method of `VirtualizedList`.
Relevant code:
<FlatList
data={this.props.tunes}
keyExtractor={(item, index) => item.id}
renderItem={({item}) => {
<Item
key={item.id}
title={item.title}
composer={item.composer}
year={item.year}
/>
}}
/>
I'm sure there is a simple fix for this, but after a few days of trying different things I haven't found it. Thanks for your help!
Looks like you need to change
key
toid
as you writeitem.id
inkeyExtractor
and be sure you have id and it's different for each component:Or if you don't have unique key use
keyExtractor={(item, index) => index}