Rendering Lists with map() and Keys

React does not have a special loop syntax for rendering repeated UI; instead, you use the standard JavaScript array method .map() to transform an array of data into an array of JSX elements, which React can then render directly as siblings.

Whenever you render a list of elements this way, each element needs a special key prop — a stable, unique string or number identifying that item among its siblings. Keys are not visible in the rendered output; they exist purely to help React's reconciliation algorithm track which items changed, were added, or were removed between renders.

Why it matters

Most screens show a list: products, messages, search results. Rendering one takes a single line of React, and the key that goes with it is one of the most misunderstood details. A wrong key gives bugs that look impossible, such as text typed into one row jumping to another.

Transforming Data into JSX with map()

Given an array of data, array.map(item => <li key={item.id}>{item.name}</li>) produces a new array of <li> elements, one per data item, which can be placed directly inside a parent element like <ul>.

Why Keys Matter for Reconciliation

When state or props change, React compares the new list of elements to the previous one to figure out the minimal set of DOM changes needed. Keys let React match up elements across renders by identity rather than by position, so if an item is removed from the middle of a list, React can correctly remove just that one DOM node and reuse the rest — preserving component state, focus, and input values that belong to the untouched items. Without stable keys (or when using the array index as a key on a list that can reorder), React can misattribute state between items, causing subtle bugs like text staying in the wrong input field after a reorder.

Choosing a Good Key

A key should come from the data itself — a database ID, a unique slug, or another value that stays constant across renders and re-orderings for a given logical item. Using the array index as a key is only safe when the list is static, never reordered, and never filtered.

• Keys only need to be unique among sibling elements, not globally unique across the whole app.
• Keys are used internally by React and are not passed down to the component as a prop — access other identifying data through a normal prop if the component needs it.
• Avoid generating a new random key on every render (e.g. Math.random()); this defeats the purpose entirely by making every item look "new" each time.

Example

const todos = [
  { id: 'a1', text: 'Buy groceries' },
  { id: 'a2', text: 'Walk the dog' },
  { id: 'a3', text: 'Write React notes' },
];

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

export default function App() {
  return <TodoList items={todos} />;
}

Renders an unordered list with three list items reading "Buy groceries", "Walk the dog", and "Write React notes" in order, each keyed by its stable id (a1, a2, a3) so React can track them correctly if the list changes later.

Exercise

Do this in src/App.jsx of a Vite + React project. Render the tasks as an unordered list, giving each item a stable key. Add a Remove button to each item that removes that task from state.

Expected result: three tasks are listed; clicking Remove beside one deletes only that task, and there is no key warning in the console.

import { useState } from "react";

export default function App() {
  const [tasks, setTasks] = useState([
    { id: 1, title: "Learn JSX" },
    { id: 2, title: "Learn state" },
    { id: 3, title: "Build a project" },
  ]);

  // TODO: function remove(id) that keeps every task except the one with that id

  return (
    <ul>
      {/* TODO: one li per task, with a key, the title and a Remove button */}
    </ul>
  );
}

import { useState } from "react";

export default function App() {
  const [tasks, setTasks] = useState([
    { id: 1, title: "Learn JSX" },
    { id: 2, title: "Learn state" },
    { id: 3, title: "Build a project" },
  ]);

  function remove(id) {
    setTasks(tasks.filter((task) => task.id !== id));
  }

  return (
    <ul>
      {tasks.map((task) => (
        <li key={task.id}>
          {task.title} <button onClick={() => remove(task.id)}>Remove</button>
        </li>
      ))}
    </ul>
  );
}

Quick quiz

Interview questions