Lists & Keys

Render arrays of elements with map() and why keys matter

Knowledge0%

Learn & Drill

Fluency0%

Drill & Speed

Retention0%

Mastery & Review

Confidence0%

All modes

Practice

Free tier: read the explanation here. Upgrade to Pro for Drills, Speed challenges & Mastery badges.

Upgrade

Knowledge

Fluency

Retention

Knowledge Debt detected

You can study this freely — but your score may plateau if these foundations have gaps. The Mastery badge requires them to be solid.

Array Methods0%

Components & Props0%

Explanation

Render lists by mapping an array to JSX. Each item needs a unique .

jsx

const todos = [
  { id: 1, text: 'Learn React' },
  { id: 2, text: 'Build something' },
];

function TodoList() {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

Why keys matter:

React uses keys to track which items have changed, been added, or removed. Without stable keys, React may re-render or reorder items incorrectly.

Good keys: database IDs, stable unique identifiers Bad keys: array index (can cause bugs when items reorder/insert/delete)

jsx

// OK for static, never-reordered lists
items.map((item, index) => <li key={index}>{item}</li>)

// Correct for dynamic lists
items.map(item => <li key={item.id}>{item.name}</li>)

Keys must be unique among siblings — not globally unique.

Keys are not props — the component does not receive props.key. Use a separate prop if you need the ID inside the component.

jsx

// Wrong: key is not accessible as a prop
<Item key={item.id} />

// Right: pass id separately if you need it inside Item
<Item key={item.id} id={item.id} />

Examples

Filtered list rendering

Filter before mapping — always handle the empty case

function UserList({ users, filterRole }) {
  const filtered = users.filter(u => u.role === filterRole);

  if (filtered.length === 0) {
    return <p>No users with role: {filterRole}</p>;
  }

  return (
    <ul>
      {filtered.map(user => (
        <li key={user.id}>
          {user.name} — {user.email}
        </li>
      ))}
    </ul>
  );
}

Rendering a component list

Components in lists need keys too — not just HTML elements

function ProductGrid({ products }) {
  return (
    <div className="grid">
      {products.map(product => (
        <ProductCard
          key={product.id}
          id={product.id}          // pass id as prop too if needed inside
          name={product.name}
          price={product.price}
          imageUrl={product.imageUrl}
        />
      ))}
    </div>
  );
}

How well did you understand this?

Next in React

useEffect

Continue