Lists & keys — rendering arrays
2 min read
Showing a list of things
Almost every app shows lists — products, messages, todos, users. In React you turn an array of data into an array of JSX using map (remember map from JavaScript!).
Rendering a list with map
function FruitList() {
const fruits = ["Apple", "Banana", "Mango"];
return (
<ul>
{fruits.map((fruit) => (
<li key={fruit}>{fruit}</li>
))}
</ul>
);
}
map takes each item and returns an <li> for it. React renders the whole list. This is the standard React pattern for lists.
What is that "key"? And why does it matter?
Did you notice key={fruit}? React asks for a unique key on each list item.
Why? When the list changes (an item added, removed, or reordered), React needs to know which item is which, so it can update only what changed instead of redrawing everything. The key is that unique identity.
- Use something unique and stable — usually an
idfrom your data:
{users.map((user) => (
<UserCard key={user.id} name={user.name} />
))}
- Avoid using the array index as the key if the list can change order — it causes subtle bugs.
Lists of objects (real data)
const products = [
{ id: 1, name: "Pen", price: 10 },
{ id: 2, name: "Book", price: 50 },
];
<ul>
{products.map((p) => (
<li key={p.id}>{p.name} — ₹{p.price}</li>
))}
</ul>
Render lists with
map, returning JSX for each item. Always give each item a unique, stablekey(usually an id) so React updates the list efficiently.