Lists and keys

What you'll learn

How to turn an array into a list of elements with .map(), why every item needs a key, and how to add, remove and filter items using state.

Why it matters

Almost every screen shows a list: messages, products, search results. You will build them from data, and React needs a little help to update them efficiently.

Explanation

In JSX you can put an array of elements inside curly braces, and React shows them all. To make that array from data, use .map():

The key prop is a unique, stable identifier for each item in the list. React uses it to match items between renders, so it can tell which item was added, moved or removed, instead of rebuilding the whole list.

• Use a real id from your data (item.id), not the array index, when items can be reordered or removed.
• Keys only need to be unique among siblings, and they are not passed to your component as a prop.

To change a list in state, never modify the array directly. Create a new one:

• Add: setItems([...items, newItem])
• Remove: setItems(items.filter((i) => i.id !== id))
• Filter for display: items.filter(...) just before map.

Example

Step-by-step walkthrough

1. items holds objects with an id and text.
2. .map turns each object into an <li> with key={item.id}.
3. add creates a new array with the spread operator and appends the new item, which tells React the state changed.
4. remove uses .filter to build a new array without that id.
5. Each button calls remove with its own item.id, using an arrow function so it only runs on click.
6. The paragraph shows the length and updates automatically.

Try it yourself

Type an item and press Add, then remove some. Add a "Clear all" button that calls setItems([]).

Lists and keysReact

Editable codefunction App() { const [items, setItems] = useState([ { id: 1, text: "Learn JSX" }, { id: 2, text: "Learn props" }, ]); const [text, setText] = useState(""); const [nextId, setNextId] = useState(3); function add() { if (text.trim() === "") return; setItems([...items, { id: nextId, text }]); setNextId(nextId + 1); setText(""); } function remove(id) { setItems(items.filter((item) => item.id !== id)); } return ( <div style={{ fontFamily: "system-ui" }}> <input value={text} onChange={(e) => setText(e.target.value)} placeholder="New item" /> <button onClick={add}>Add</button> <ul> {items.map((item) => ( <li key={item.id}> {item.text} <button onClick={() => remove(item.id)}>x</button> </li> ))} </ul> <p>{items.length} items</p> </div> ); }

Run ResetCopyCtrl+Enter to run

Common mistakes

• Missing keys, which triggers a warning and causes subtle bugs.
• Using the array index as a key for lists that change order.
• Changing state arrays with push. Create a new array instead.
• Calling remove(item.id) directly in onClick so it runs on render. Wrap it in an arrow function.

Quick quiz

Summary

• Render lists with .map and give each item a unique, stable key.
• Update list state by creating new arrays with spread and filter.
• Prefer real ids over indexes.

Next: running code after render with useEffect.

<ul>
  {names.map((name) => <li key={name}>{name}</li>)}
</ul>

function App() {
  const [items, setItems] = useState([
    { id: 1, text: "Learn JSX" },
    { id: 2, text: "Learn props" },
  ]);
  const [text, setText] = useState("");
  const [nextId, setNextId] = useState(3);

  function add() {
    if (text.trim() === "") return;
    setItems([...items, { id: nextId, text }]);
    setNextId(nextId + 1);
    setText("");
  }

  function remove(id) {
    setItems(items.filter((item) => item.id !== id));
  }

  return (
    <div style={{ fontFamily: "system-ui" }}>
      <input value={text} onChange={(e) => setText(e.target.value)} placeholder="New item" />
      <button onClick={add}>Add</button>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            {item.text} <button onClick={() => remove(item.id)}>x</button>
          </li>
        ))}
      </ul>
      <p>{items.length} items</p>
    </div>
  );
}