Day 8: Lists and Keys in React.js
If you’ve been following along in our React learning series, you already know how to handle events, forms, and conditional rendering. Now let’s take the next step: displaying dynamic lists of data. This is done using Lists and Keys in React .
This is one of the most common patterns in React apps—whether you’re building a to-do list, showing products in an e-commerce site, or rendering blog posts. Let’s break it down step by step.
What are Lists in React?
A list in React is just a collection of elements (usually an array) that you render into the DOM.
For example, imagine you have an array of fruits:
const fruits = ["Apple", "Banana", "Mango", "Orange"];If you want to show them as a list on the screen, you can use JavaScript’s .map() method to loop through and return JSX:
function FruitList() {
const fruits = ["Apple", "Banana", "Mango", "Orange"];
return (
<ul>
{fruits.map((fruit) => (
<li>{fruit}</li>
))}
</ul>
);
}
export default FruitList;Here, React will render:
- Apple
- Banana
- Mango
- Orange
So simple, right? But wait—there’s one small detail we need to address: keys.
Why Do We Need Keys?
When you render a list in React, each item needs a unique identifier called a key.
Why? Because React uses its Virtual DOM to figure out what changed. If it doesn’t know which item is which, it can get confused and re-render more than necessary.
Let’s improve the example by adding keys:
function FruitList() {
const fruits = ["Apple", "Banana", "Mango", "Orange"];
return (
<ul>
{fruits.map((fruit, index) => (
<li key={index}>{fruit}</li>
))}
</ul>
);
}Now each <li> has a key. In this case, we used the index as the key. But let’s pause here—using index as a key is not always a good idea.
The Problem with Index as Key
If the list is static (doesn’t change), using index is fine. But if items are added, removed, or reordered, React may re-use elements incorrectly.
Example:
- Suppose the list is
["Apple", "Banana", "Mango"] - Then you insert “Orange” at the beginning →
["Orange", "Apple", "Banana", "Mango"]
If you used index as the key, React would think “Orange” is the old “Apple” (because both are at index 0), and it might update wrongly.
That’s why using unique IDs for keys is better.
Using Unique IDs as Keys
Imagine you have a list of objects with IDs:
const users = [
{ id: 1, name: "Anand" },
{ id: 2, name: "Priya" },
{ id: 3, name: "Rahul" }
];Here’s how you render with proper keys:
function UserList() {
const users = [
{ id: 1, name: "Anand" },
{ id: 2, name: "Priya" },
{ id: 3, name: "Rahul" }
];
return (
<ul>
{users.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}This way, each <li> has a unique and stable key.
Keys and Performance
React doesn’t care what the key looks like—it just needs to be:
- Unique → No two siblings should have the same key
- Stable → It should not change between renders
Good keys help React:
- Minimize re-renders
- Keep your app faster
- Avoid weird bugs in dynamic lists
Common Mistakes with Keys
❌ Using index as a key in dynamic lists
- Leads to unexpected UI issues when the list changes.
❌ Forgetting keys altogether
- React will warn: “Each child in a list should have a unique ‘key’ prop.”
❌ Using random numbers like Math.random()
- Bad because the key changes on every render → React can’t optimize.
✅ Best Practice: Use a stable unique ID (like database IDs, UUIDs, or object properties).
Real-Life Example: Todo App
Let’s make a small Todo List to bring it all together:
import { useState } from "react";
function TodoApp() {
const [todos, setTodos] = useState([
{ id: 1, text: "Learn React" },
{ id: 2, text: "Build Projects" },
{ id: 3, text: "Get a Job" }
]);
return (
<div>
<h2>My Todo List</h2>
<ul>
{todos.map((todo) => (
<li key={todo.id}>{todo.text}</li>
))}
</ul>
</div>
);
}
export default TodoApp;Here:
- The list is rendered dynamically.
- Each item has a unique ID as the key.
- React will only update the changed item when state changes.
Final Thoughts
Lists and Keys in React are essential for rendering collections of data efficiently. You’ll use them almost everywhere—from displaying comments, products, or posts to building dashboards and tables.
👉 Remember:
- Use
.map()to loop over arrays. - Always give each element a unique and stable key.
- Avoid using array index as key for dynamic lists.
Now you’re one step closer to writing real-world React apps that scale!
What’s Next?
Now that you know how to work with lists and keys, you’re ready for a big step – Day 9: useState React Hook.
Stay tuned! 🎉
