How to Render Lists in React with map()

To render lists in React, map an array of data into an array of JSX elements. Each item becomes one element on the screen, and a key tells React which item is which when the list changes.

Start with a plain array of strings and map it into list items:

App.jsx

const tasks = ["Plan", "Build", "Ship"];
 
function TaskList() {
  return (
    <ul>
      {tasks.map((task) => <li>{task}</li>)}
    </ul>
  );
}

The page shows three list items: Plan, Build, and Ship. The map method walks the array and returns one list item per string, which JSX renders inside the ul element. The map method returns a brand new array, so the original tasks array is untouched.

Add a key to every item

The example above renders correctly, but React prints a warning in the browser console: each child in a list should have a unique key. A key is a string or number that identifies an item among its siblings.

Here is the same list with a key taken from the data:

App.jsx

const tasks = [
  { id: 1, title: "Plan" },
  { id: 2, title: "Build" }
];
 
function TaskList() {
  return <ul>{tasks.map((task) => <li key={task.id}>{task.title}</li>)}</ul>;
}

The warning disappears because React can now tell the two items apart even if their order changes. The key stays on the element returned by map, not inside the li tag.

A key does not have to be an id field. It can be any string or number that stays the same for that item across renders.

Where stable keys come from

A good key comes from the data itself. A database id, a user name, or any value that is unique among the siblings and does not change works well.

Two rules keep keys reliable. Keys must be unique among siblings, and they must not change between renders.

Never generate a key with Math.random(), because a new key on every render makes React rebuild the whole list. React keeps the key for itself and does not pass it into your component as a prop. If a component needs the id, pass it again with a different name.

Why the index is not safe

You can use the array index as a key, but only when the list is static and never reorders, inserts, or deletes items. The index describes position, not identity.

If you remove the first item of a reorderable list, every remaining item shifts position, and React matches the wrong element to the wrong data.

State and user input inside those items can end up on the wrong row. Picture a todo list where the first row is deleted: the second row becomes the first, and its checkbox keeps the old value from the row that disappeared.

Filter before you render

When a list should show only some items, filter the array first, then map the result.

App.jsx

const done = tasks.filter((task) => task.done);
 
function TaskList() {
  return <ul>{done.map((task) => <li key={task.id}>{task.title}</li>)}</ul>;
}

Only tasks where done is true appear on screen. Filtering first keeps the render simple, and the same key rules still apply. The filter method returns a new array, so the original list is still available for showing all items elsewhere.

What to learn next

Lists usually combine with conditions, which the guide on conditional rendering in React covers. If one item needs several elements, the guide on fragments in React shows how to group them without breaking the key placement. Both topics build on the curly brace expressions you used inside the map call.