Code QuizAdvanced

FlatList Missing Key Extractor

Spot why FlatList warns about missing keys when list items lack an id.

Codejavascript

import { FlatList, Text } from 'react-native';

const products = [
  { productName: 'Keyboard', price: 40 },
  { productName: 'Mouse', price: 20 },
  { productName: 'Monitor', price: 150 },
];

export default function ProductList() {
  return (
    <FlatList
      data={products}
      renderItem={({ item }) => <Text>{item.productName}</Text>}
    />
  );
}

This FlatList triggers a React Native warning at runtime. What is the bug and how do you fix it?

Next →FlatList keys with keyExtractor