Rendering Lists and the key Prop
Keys are like name tags React uses to remember which list item is which, even after the list changes.
In this page:
Syntax
<ul>
{array.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>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>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
Common Mistakes
- 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.
Chapter Summary
.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.
Browser Support
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: