Lists & Keys

Lists — rendering arrays with map()

Use array.map() to turn data into a list of JSX elements. Each item should become one row, card, or list element.

Real-life example: map() is like a printing machine — one template (li or card), many copies (one per array item).

const topics = ["JSX", "Props", "Hooks", "Router"];

function TopicList() {
  return (
    <ul>
      {topics.map((topic) => (
        <li key={topic}>{topic}</li>
      ))}
    </ul>
  );
}

Keys — why React needs them

Each sibling in a list needs a unique key prop. Keys help React know which item changed, was added, or removed.

Use stable IDs from a database — not array index when the list can reorder, filter, or delete items.

Real-life example: Keys are roll numbers in a classroom. When one student moves seats, the teacher still knows who is who by roll number — not by seat position alone.

function TodoList({ todos, onToggle }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li
          key={todo.id}
          className={todo.done ? "done" : ""}
          onClick={() => onToggle(todo.id)}
        >
          {todo.text}
        </li>
      ))}
    </ul>
  );
}