Rendering Lists and the key Prop
In this page:
Rendering an Array with map()
Array.prototype.map() is the standard way to turn an array of data into an array of JSX elements, one per item.
Note: map() must return a value for each item -- forgetting the return (in a curly-brace arrow function body) produces a list of undefined items.
Warning: Calling .map() on something that isn't actually an array (like a single object) throws a TypeError at render time.
Example: Rendering an Array with map()
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function FruitList() {
const fruits = ['Apple', 'Banana', 'Cherry'];
return (
<ul>
{fruits.map((fruit) => <li key={fruit}>{fruit}</li>)}
</ul>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<FruitList />);
</script>
</body>
</html>Why the key Prop Matters
Each item rendered from a list needs a unique key prop so React can track which item is which across re-renders, correctly reusing, reordering, or removing the right DOM elements.
Note: Use a stable, unique value from the data itself (like an id) as the key whenever one is available.
Warning: React logs a console warning when a list is rendered without keys, and list re-ordering can then visually mix up item state in surprising ways.
Example: Why the key Prop Matters
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function UserList() {
const users = [{id: 1, name: 'Ravi'}, {id: 2, name: 'Meera'}];
return (
<ul>
{users.map((u) => <li key={u.id}>{u.name}</li>)}
</ul>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<UserList />);
</script>
</body>
</html>Why Array Index as key Is Risky
Using the array index as a key (key={index}) works for a static, never-reordered list, but breaks item identity if items are inserted, removed, or reordered, since the index no longer corresponds to the same underlying item.
Note: Prefer a real id from your data over the array index whenever the list can change order.
Warning: Using index as key on a reorderable/filterable list can cause input fields inside list items to show the wrong value after reordering, since React matches by key/position, not by the item's actual identity.
Example: Why Array Index as key Is Risky
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function IndexKeyWarning() {
const items = ['A', 'B', 'C'];
return (
<ul>
{items.map((item, index) => <li key={index}>{item} (index key -- risky if reordered)</li>)}
</ul>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<IndexKeyWarning />);
</script>
</body>
</html>- Using the array index as a key when the list can be reordered, added to, or filtered -- this causes bugs.
- Forgetting to add a key at all, which triggers a console warning and hurts update performance.
- Using non-unique keys that repeat across sibling elements.
.map()is the standard way to render a list of elements from an array.- Each item in a rendered list needs a unique
keyprop. - Keys help React efficiently identify which items changed, were added, or were removed.
- A stable, unique ID from your data is a better key than the array index.
No browser-specific restrictions -- keys are a React reconciliation concept.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: