Rendering Lists & Keys

Turning an array of data into a list on the page is one of the most common things a React component does — and it leans entirely on the plain JavaScript .map() method you already know from the Array Methods lesson.

Mapping an array to JSX

function GroceryList() {
  const items = ["Milk", "Eggs", "Bread"];

  return (
    <ul>
      {items.map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

A bulleted list with three items:
• Milk
• Eggs
• Bread

items.map(...) returns a new array of <li> elements, one per grocery item — and JSX knows how to render an array of elements directly, placing each one in order.

Why every item needs a key

The key prop isn't optional in practice — React uses it to match up array items between renders, so it knows which DOM elements to reuse, update, or remove when the underlying data changes:

function UserList({ users }) {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Warning: Each child in a list should have a unique
"key" prop.

A database-assigned id (like user.id above) is the ideal key — it's stable and unique regardless of how the list gets reordered or filtered.