React applications frequently need to display collections of data. Examples include products, employees, orders, messages, notifications, and search results. React commonly renders these collections using JavaScript's map() method.
1 Rendering a Simple List
function ProductList() {
const products = [
"Laptop",
"Phone",
"Monitor"
];
return (
<ul>
{products.map(product => (
<li key={product}>
{product}
</li>
))}
</ul>
);
}2 Rendering Objects
Real applications usually work with objects.
function ProductList() {
const products = [
{
id: 1,
name: "Laptop",
price: 75000
},
{
id: 2,
name: "Phone",
price: 40000
}
];
return (
<div>
{products.map(product => (
<article key={product.id}>
<h2>{product.name}</h2>
<p>₹{product.price}</p>
</article>
))}
</div>
);
}3 Why Do We Need Keys?
Keys help React identify which list item corresponds to which data item when the list changes.
For example, suppose the original list is:
A
B
Cand a new item is inserted:
X
A
B
CStable keys help React understand that A, B, and C are still the same logical items and that X is a new item.
4 Key Concept
flowchart TD
A[List Data] --> B[map]
B --> C[React Elements]
C --> D[Each Element Has Stable Key]
D --> E[React Tracks Items Between Renders]
E --> F[Efficient UI Update]5 What Makes a Good Key?
A good key should be:
- Unique among siblings.
- Stable across renders.
- Connected to the identity of the item.
A database ID is often a good key:
<ProductCard
key={product.id}
product={product}
/>6 Why Array Index Is Often a Bad Key
Using the array index as a key can create problems when items are inserted, removed, or reordered.
// Usually avoid for dynamic lists
products.map((product, index) => (
<ProductCard
key={index}
product={product}
/>
))If the list never changes order and items are static, an index can sometimes be acceptable. But for dynamic lists, a stable item identifier is usually safer.
7 Complete Example — Employee List
function EmployeeList() {
const employees = [
{
id: 101,
name: "Rahul",
role: "Software Engineer"
},
{
id: 102,
name: "Priya",
role: "Project Manager"
},
{
id: 103,
name: "Amit",
role: "Architect"
}
];
return (
<section>
<h2>Employees</h2>
{employees.map(employee => (
<article key={employee.id}>
<h3>{employee.name}</h3>
<p>{employee.role}</p>
</article>
))}
</section>
);
}8 Rendering Components in a List
function EmployeeCard({ employee }) {
return (
<article>
<h3>{employee.name}</h3>
<p>{employee.role}</p>
</article>
);
}
function EmployeeList({ employees }) {
return (
<div>
{employees.map(employee => (
<EmployeeCard
key={employee.id}
employee={employee}
/>
))}
</div>
);
}9 Filtering Before Rendering
A common pattern is filtering data and then mapping the result.
const activeEmployees =
employees.filter(employee => employee.active);
return (
<div>
{activeEmployees.map(employee => (
<p key={employee.id}>
{employee.name}
</p>
))}
</div>
);10 Sorting Before Rendering
When sorting data, be careful not to mutate state arrays directly.
const sortedProducts = [...products].sort(
(a, b) => a.price - b.price
);11 List State Example
function TodoList() {
const [todos, setTodos] = useState([
{
id: 1,
text: "Learn React",
completed: false
},
{
id: 2,
text: "Build Project",
completed: false
}
]);
function completeTodo(id) {
setTodos(previous =>
previous.map(todo =>
todo.id === id
? {
...todo,
completed: true
}
: todo
)
);
}
return (
<ul>
{todos.map(todo => (
<li key={todo.id}>
{todo.text}
{!todo.completed && (
<button
onClick={() =>
completeTodo(todo.id)
}
>
Complete
</button>
)}
</li>
))}
</ul>
);
}12 Keys Are About Identity
A key is not primarily a value that you display to the user. It is information React uses to identify an item among its siblings.
flowchart TD
A[Previous List] --> B[Keys Identify Items]
C[New List] --> D[Keys Identify Items]
B --> E[React Compares Identity]
D --> E
E --> F[Update Existing Items]
E --> G[Create New Items]
E --> H[Remove Missing Items]13 Keys Should Usually Be Local to the List
Keys need to be unique among sibling elements in the same list. The same key value can be used in another unrelated list without being a problem.
14 Key Is Not Automatically a Prop
A key is used by React for reconciliation. It is not automatically available inside the component as a normal prop.
function ProductCard(props) {
// props.key is not how you should access the key.
return <div>{props.product.name}</div>;
}If the component needs the ID as data, pass it explicitly.
<ProductCard
key={product.id}
productId={product.id}
product={product}
/>15 Common Mistakes
- Forgetting the key when rendering a list.
- Using an unstable value as a key.
- Using array indexes for lists that can be reordered or changed.
- Generating a random key during every render.
- Assuming the key is available as
props.key. - Mutating the original array before sorting.
16 Interview Questions
- How do you render a list in React?
- Why are keys required?
- What makes a good key?
- Why can array indexes be problematic as keys?
- Are keys available as component props?
- What happens when list items are inserted or removed?
- How do you filter a list before rendering?
- How do you update an item in a state array?
17 Key Takeaways
- Use
map()to render collections. - Give list items stable keys.
- Prefer an ID that represents the item's identity.
- Avoid array indexes for dynamic or reorderable lists.
- Keys help React track items between renders.
- Keys are not automatically passed to the child component as props.
Conclusion
Rendering lists is a daily React task. The important concepts are map(), stable keys, immutable array updates, filtering, and understanding item identity. A strong understanding of keys is especially important for React interviews because incorrect keys can produce confusing UI behavior.