How to Map Over an Array in React

What you’ll build or solve

You’ll render lists in React by transforming an array into JSX elements using map().

When this approach works best

Mapping works best when you need to:

• Render repeated UI from dynamic data, like users, products, or comments.
• Turn API data into components.
• Transform filtered or sorted arrays into visible lists.

Avoid mapping when the value is not an array. Also, avoid using unstable keys for lists that can be reordered or changed.

Prerequisites

• A React app set up
• Basic JSX knowledge
• Familiarity with JavaScript arrays and map().

Step-by-step instructions

1) Map over an array inside JSX

React does not have its own looping syntax. You use JavaScript’s map() inside JSX to return elements.

exportdefaultfunctionFruitList() {
constfruits= ["Apple", "Banana", "Orange"];

return (
<ul>
      {fruits.map((fruit) => (
<likey={fruit}>{fruit}</li>
      ))}
</ul>
  );
}

map() creates a new array. React renders the returned array of <li> elements.

Mapping arrays of objects

constusers= [
  { id:1, name: "Sam" },
  { id:2, name: "Alex" },
];

<ul>
  {users.map((user) => (
<likey={user.id}>{user.name}</li>
  ))}
</ul>

Rendering components inside map.

functionUserCard({ user }) {
return<div>{user.name}</div>;
}

{users.map((user) => (
<UserCardkey={user.id}user={user}/>
))}

What to look for:

• Wrap the map() call in {} inside JSX.
• Always provide a key prop.
• Use a stable identifier like id, not the array index.
• Place the key on the element returned by map().
• You can chain array methods like filter().map() when needed.

Examples you can copy

Example 1: Simple navigation menu

exportdefaultfunctionNav() {
constlinks= ["Home", "About ", "Contact"];

return (
<nav>
      {links.map((label) => (
<a
key={label}
href={`/${label.toLowerCase()}`}
>
          {label}
</a>
      ))}
</nav>
  );
}

Example 2: Filter before mapping

exportdefaultfunctionActiveUsers({ users }) {
return (
<ul>
      {users
.filter((u) =>u.active)
.map((user) => (
<likey={user.id}>{user.name}</li>
        ))}
</ul>
  );
}

Filtering first keeps the mapping logic clean.

Example 3: Render a grid of cards

functionProductCard({ product }) {
return (
<div>
<h3>{product.title}</h3>
<p>${product.price}</p>
</div>
  );
}

exportdefaultfunctionProductGrid({ products }) {
return (
<div>
      {products.map((product) => (
<ProductCard
key={product.id}
product={product}
/>
      ))}
</div>
  );
}

Common mistakes and how to fix them

Mistake 1: Forgetting the key prop

What you might do:

{users.map((user) => (
<li>{user.name}</li>
))}

Why it breaks:

React cannot track items efficiently and shows a warning.

Fix:

{users.map((user) => (
<likey={user.id}>{user.name}</li>
))}

Mistake 2: Using the array index as the key for dynamic lists

What you might do:

{items.map((item,index) => (
<likey={index}>{item.name}</li>
))}

Why it breaks:

When items are reordered or removed, React can mismatch elements, causing subtle UI bugs.

Fix:

{items.map((item) => (
<likey={item.id}>{item.name}</li>
))}

Use a stable ID from the data whenever possible.

Troubleshooting

• If you see “Each child in a list should have a unique key,” add a key prop to the element returned by map().
• If items render in the wrong order after updates, check that keys are stable and not indexes.
• If nothing renders, confirm you are mapping over an array and not undefined or null.
• If you see Cannot read properties of undefined (reading 'map'), initialize state to an empty array like useState([]).

Quick recap

• Use array.map() inside JSX to render lists.
• Wrap the map() call in {}.
• Always provide a stable key.
• Avoid using indexes as keys for dynamic lists.
• Combine filter() and map() when needed.