1

I'm new to React Native and I'm following along with a tutorial. I'm using FlatList for rendering components. This is my component:

const HomeScreen = (props) => {
  console.log("articles: ", props.articles);
  return (
    <View>
        <FlatList
          data={ props.articles }
          renderItem={({item}) => <Text> {item.title}</Text>}
        />
    </View>
  );
}

In the tutorial, it is mentioned that if we don't use KeyExtarctor, the FlatList will throw this warning

VirtualizedList: missing keys for items, make sure to specify a key property on each item or provide a custom keyExtractor.

I don't see any warning like that. The tutorial is pretty old so I was wondering does this issue still persists with the latest version of React Native?

nimramubashir
  • 61
  • 1
  • 9
  • Does this answer your question? [Basic FlatList code throws Warning - React Native](https://stackoverflow.com/questions/44545148/basic-flatlist-code-throws-warning-react-native) – Abhi May 07 '21 at 20:12
  • No, it doesn't. According to this question, I should get a warning. But I am not getting any. My question is: "Why am I not getting any warning when I should?" @Abhi – nimramubashir May 07 '21 at 21:47

1 Answers1

0
<FlatList
    data={ props.articles }
    keyExtractor={(item) => item.id.toString()} // it is implemented like this
    renderItem={({item}) => <Text> {item.title}</Text>}
/>

Your props.articles array items should have an key or a unique property to assign it to the key.

keyExtractor is required to avoid the recreation of the list by tracking the reordering of the items.

IMPORTANT POINT

React always uses a unique key to track the updates in a component. By default, the FlatList looks either for a custom keyExtractor implementation or a field named key in a data item, otherwise it uses the array index as the value of key. The id is a unique value in the response that can be used to implement the keyExtractor

Kartikey
  • 4,516
  • 4
  • 15
  • 40