How to Render Lists in React Using .map() Correctly

How to Render Lists in React Using .map() Correctly

Almost every React app renders lists. The .map() method is the standard way, and using it correctly matters more than beginners expect.

The Basic Pattern

Call .map() on your array inside JSX, returning an element for each item. Wrap the expression in curly braces so React evaluates it during render.

Every Item Needs a Key

Each element returned from map needs a key prop. Keys help React identify which items changed, were added, or were removed, so it can update efficiently.

Use Stable IDs

The best key is a stable unique id from your data. Using the array index works for static lists but causes bugs when the list is reordered, filtered, or extended.

Do Not Use Index as Key for Dynamic Lists

When items can be added, removed, or reordered, index-based keys break React's reconciliation and can produce subtle UI bugs, like inputs showing the wrong data.

Extracting List Items

For complex item markup, extract the item into its own component. This keeps the list readable and makes the item reusable and testable.

Rendering Conditionally Inside Map

You can return null from map to skip an item, but filtering the array before mapping is usually clearer and more efficient.

The Common Mistake

Forgetting the key, using index as key for dynamic lists, or putting the key on the wrong element when extracting a component. The key goes on the outermost element returned for each item.

The Takeaway

Use .map() to render arrays, give every item a stable unique key from your data, and extract complex items into components. Get this right and a whole class of list bugs disappears.