Where should I put the key prop in React?
On the outermost element you return for each item. If you extract the item into a component, put the key on that component in the parent's map, not on an element inside the child component.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in Why the key Prop Matters When Mapping Lists in React
Keys tell React which elements correspond to which items across re-renders. When the list changes, React uses keys to match old elements to new ones and update only what is necessary, instead of re-rendering everything.
Because when the list is reordered, filtered, or has items inserted, the index no longer points to the same item. React reuses the wrong elements, causing subtle bugs like inputs showing the wrong data.
A good key is stable across re-renders and unique among siblings. The best key is a unique id from your data, like a database id. Avoid index-based keys for dynamic lists.
Still have questions?
Browse all our FAQs or reach out to our support team