Welcome back to the React Mastery Series!
In the previous article, we explored Conditional Rendering in React and learned how to build dynamic interfaces based on different application states.
Today, we will learn another concept that is used in almost every React application:
Rendering Lists
Modern applications are built around collections of data.
Examples:
- Banking applications display transaction history.
- E-commerce applications display product catalogs.
- Social media applications display posts and comments.
- Admin dashboards display users and reports.
Instead of manually writing UI elements for every item, React allows us to dynamically generate UI from arrays.
What is List Rendering?
List rendering means creating multiple UI elements by iterating over a collection of data.
Example:
Instead of writing:
<ul>
<li>React</li>
<li>Angular</li>
<li>Vue</li>
</ul>
We can store the data:
const frameworks = [
"React",
"Angular",
"Vue"
];
and generate the UI dynamically.
Rendering Lists Using map()
The most common way to render lists in React is using JavaScript's map() function.
Example:
function FrameworkList() {
const frameworks = [
"React",
"Angular",
"Vue"
];
return (
<ul>
{
frameworks.map((framework) => (
<li>
{framework}
</li>
))
}
</ul>
);
}
Output:
<ul>
<li>React</li>
<li>Angular</li>
<li>Vue</li>
</ul>
The map() function transforms each array item into a React element.
How map() Works
Consider this array:
const users = [
"Siva",
"John",
"Emma"
];
When React executes:
users.map((user) => {
return <h2>{user}</h2>;
});
The result becomes:
<h2>Siva</h2>
<h2>John</h2>
<h2>Emma</h2>
React then renders these elements into the DOM.
Rendering Lists with Objects
In real applications, data usually comes from APIs as objects.
Example:
const users = [
{
id: 1,
name: "Siva",
role: "Developer"
},
{
id: 2,
name: "John",
role: "Designer"
}
];
Rendering:
function UserList() {
return (
<div>
{
users.map((user) => (
<div>
<h3>{user.name}</h3>
<p>{user.role}</p>
</div>
))
}
</div>
);
}
Output:
Siva
Developer
John
Designer
Why Does React Need Keys?
When rendering lists, React requires a special attribute called:
key
Example:
users.map((user) => (
<div key={user.id}>
<h3>{user.name}</h3>
</div>
))
The key helps React identify each item uniquely.
Understanding Keys with an Example
Imagine a shopping cart:
Initial list:
1. Laptop
2. Mobile
3. Headphones
User removes the first item:
1. Mobile
2. Headphones
React needs to understand:
- Which item was removed?
- Which items moved?
- Which elements can be reused?
Keys provide that identity.
What Happens Without Keys?
Example:
users.map((user) => (
<UserCard user={user} />
))
React shows a warning:
Warning:
Each child in a list should have a unique "key" prop.
The application may still work, but React cannot efficiently track changes.
Best Choice for Keys
The best key is:
- Unique
- Stable
- Related to the data
Good:
<div key={user.id}>
Example:
{
id:101,
name:"Siva"
}
Avoid Using Array Index as Key
Example:
users.map((user,index)=>(
<div key={index}>
{user.name}
</div>
))
This works for static lists but can create problems when:
- Items are added
- Items are removed
- Items are reordered
Example:
Before:
Index 0 → Apple
Index 1 → Banana
Index 2 → Mango
After removing Apple:
Index 0 → Banana
Index 1 → Mango
React may think the existing elements are different items.
Real-World Example: Transaction History
A banking application may receive:
const transactions = [
{
id:101,
type:"Deposit",
amount:5000
},
{
id:102,
type:"Withdrawal",
amount:2000
}
];
Rendering:
function TransactionList(){
return (
<div>
{
transactions.map((transaction)=>(
<div key={transaction.id}>
<h3>{transaction.type}</h3>
<p>₹{transaction.amount}</p>
</div>
))
}
</div>
);
}
Each transaction has a unique identity.
Rendering Components from Lists
Usually, we don't write large JSX inside map().
Instead, we create reusable components.
Example:
function ProductCard({product}) {
return (
<div>
<h3>{product.name}</h3>
<p>₹{product.price}</p>
</div>
);
}
Then:
function ProductList(){
return (
<div>
{
products.map((product)=>(
<ProductCard
key={product.id}
product={product}
/>
))
}
</div>
);
}
This keeps components clean and reusable.
Filtering Lists Before Rendering
A common requirement is displaying only matching items.
Example:
const activeUsers =
users.filter(
user => user.active
);
Then:
activeUsers.map(user => (
<UserCard
key={user.id}
user={user}
/>
))
Common use cases:
- Active accounts
- Available products
- Completed tasks
Sorting Lists Before Rendering
Example:
const sortedUsers =
users.sort(
(a,b)=>a.name.localeCompare(b.name)
);
Then render:
sortedUsers.map(user=>(
<UserCard
key={user.id}
user={user}
/>
))
Rendering Empty States
A good application handles empty data.
Example:
function Orders(){
if(orders.length === 0){
return (
<p>
No orders found
</p>
);
}
return (
<OrderList />
);
}
This improves user experience.
Common Mistakes
1. Forgetting Keys
Incorrect:
items.map(item=>(
<Item item={item}/>
))
Correct:
items.map(item=>(
<Item
key={item.id}
item={item}
/>
))
2. Using Random Keys
Avoid:
key={Math.random()}
Why?
Every render creates new keys, causing unnecessary DOM updates.
3. Modifying Arrays Directly
Avoid:
items.push(newItem);
Use state updates:
setItems([
...items,
newItem
]);
List Rendering Performance
Large lists require optimization.
Examples:
- Virtual scrolling
- Pagination
- Memoization
- Lazy loading
Libraries like:
- React Window
- React Virtualized
help efficiently render thousands of items.
Real-World Enterprise Example
Consider an online banking portal.
Transaction API response:
GET /transactions
[
{
id:1001,
date:"01-Aug-2026",
amount:5000
},
{
id:1002,
date:"02-Aug-2026",
amount:3000
}
]
React flow:
API Response
|
↓
Store Data in State
|
↓
map() over Transactions
|
↓
Create Transaction Components
|
↓
Render UI
This pattern is used in almost every enterprise React application.
Best Practices
- Always provide stable keys.
- Prefer unique IDs from backend data.
- Extract repeated UI into components.
- Avoid complex logic inside
map(). - Handle empty states.
- Keep list components reusable.
Key Takeaways
Today, we learned:
✅ React uses JavaScript map() for rendering lists.
✅ Keys help React identify list items efficiently.
✅ Unique IDs are the best choice for keys.
✅ Lists are commonly converted into reusable components.
✅ Filtering and sorting data before rendering is a common pattern.
Coming Next 🚀
In Day 12, we will explore:
Forms in React – Building Controlled and Interactive Forms
We will learn:
- Controlled components
- Handling multiple inputs
- Form validation
- Managing form state
- Submitting forms
- Real-world login and registration examples
Forms are one of the most important parts of frontend development, and mastering them is essential for building production React applications.
Happy Coding! 🚀
Top comments (0)