Lists and Keys

To display a collection, turn an array into an array of elements with .map. React renders each element in order.

Every element in a list needs a key prop. Keys help React tell items apart so it can update the list efficiently.

• Use a stable unique value for the key, such as an id
• Avoid using the array index when the list can reorder
• Keys must be unique among siblings, not globally

const items = ["Apple", "Pear"];
items.map((name, i) => <li key={i}>{name}</li>);