Lists

When you have an array of data and want to render a list of UI elements from it, use the JavaScript .map() method. It transforms each item in the array into a piece of JSX.

Every item rendered in a list must have a unique key prop. The key must be a string or number that uniquely identifies that item among its siblings — usually an ID from your data.

React uses keys to track which items have changed, been added, or been removed between renders. Without keys, React has to guess — which causes bugs with stateful list items and is slower.

Don't use the array index as a key if your list can be reordered or filtered. Index keys cause subtle bugs because the key stays the same even when a different item is at that position. Use a real ID when you have one.