React Mastery Series – Day 11: Rendering Lists in React – Working with Arrays and Keys

DEV Community · Siva Samanthapudi · 2026-08-02 개발(SW)

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>

Enter fullscreen mode Exit fullscreen mode

We can store the data:

const frameworks = [
  "React",
  "Angular",
  "Vue"
];

Enter fullscreen mode Exit fullscreen mode

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>
  );

}

Enter fullscreen mode Exit fullscreen mode

Output:

<ul>
  <li>React</li>
  <li>Angular</li>
  <li>Vue</li>
</ul>

Enter fullscreen mode Exit fullscreen mode

The map() function transforms each array item into a React element.

How map() Works

Consider this array:

const users = [
  "Siva",
  "John",
  "Emma"
];

Enter fullscreen mode Exit fullscreen mode

When React executes:

users.map((user) => {
  return <h2>{user}</h2>;
});

Enter fullscreen mode Exit fullscreen mode

The result becomes:

<h2>Siva</h2>
<h2>John</h2>
<h2>Emma</h2>

Enter fullscreen mode Exit fullscreen mode

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"
  }
];

Enter fullscreen mode Exit fullscreen mode

Rendering:

function UserList() {

  return (
    <div>
      {
        users.map((user) => (
          <div>
            <h3>{user.name}</h3>
            <p>{user.role}</p>
          </div>
        ))
      }
    </div>
  );

}

Enter fullscreen mode Exit fullscreen mode

Output:

Siva
Developer

John
Designer

Enter fullscreen mode Exit fullscreen mode

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>
))

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

User removes the first item:

1. Mobile
2. Headphones

Enter fullscreen mode Exit fullscreen mode

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} />
))

Enter fullscreen mode Exit fullscreen mode

React shows a warning:

Warning:
Each child in a list should have a unique "key" prop.

Enter fullscreen mode Exit fullscreen mode

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}>

Enter fullscreen mode Exit fullscreen mode

Example:

{
 id:101,
 name:"Siva"
}

Enter fullscreen mode Exit fullscreen mode

Avoid Using Array Index as Key

Example:

users.map((user,index)=>(
  <div key={index}>
    {user.name}
  </div>
))

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

After removing Apple:

Index 0 → Banana
Index 1 → Mango

Enter fullscreen mode Exit fullscreen mode

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
  }
];

Enter fullscreen mode Exit fullscreen mode

Rendering:

function TransactionList(){

return (
<div>
{
transactions.map((transaction)=>( 
  <div key={transaction.id}>
    <h3>{transaction.type}</h3>
    <p>₹{transaction.amount}</p>
  </div>
))
}
</div>
);
}

Enter fullscreen mode Exit fullscreen mode

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>
);
}

Enter fullscreen mode Exit fullscreen mode

Then:

function ProductList(){
return (
<div>
{
products.map((product)=>(
  <ProductCard
    key={product.id}
    product={product}
  />
))
}
</div>
);

}

Enter fullscreen mode Exit fullscreen mode

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
);

Enter fullscreen mode Exit fullscreen mode

Then:

activeUsers.map(user => (
  <UserCard
    key={user.id}
    user={user}
  />
))

Enter fullscreen mode Exit fullscreen mode

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)
);

Enter fullscreen mode Exit fullscreen mode

Then render:

sortedUsers.map(user=>(
<UserCard
 key={user.id}
 user={user}
/>
))

Enter fullscreen mode Exit fullscreen mode

Rendering Empty States

A good application handles empty data.

Example:

function Orders(){

if(orders.length === 0){

return (
  <p>
    No orders found
  </p>
);

}

return (
<OrderList />
);

}

Enter fullscreen mode Exit fullscreen mode

This improves user experience.

Common Mistakes

1. Forgetting Keys

Incorrect:

items.map(item=>(
  <Item item={item}/>
))

Enter fullscreen mode Exit fullscreen mode

Correct:

items.map(item=>(
  <Item
    key={item.id}
    item={item}
  />
))

Enter fullscreen mode Exit fullscreen mode

2. Using Random Keys

Avoid:

key={Math.random()}

Enter fullscreen mode Exit fullscreen mode

Why?

Every render creates new keys, causing unnecessary DOM updates.

3. Modifying Arrays Directly

Avoid:

items.push(newItem);

Enter fullscreen mode Exit fullscreen mode

Use state updates:

setItems([
  ...items,
  newItem
]);

Enter fullscreen mode Exit fullscreen mode

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
 }
]

Enter fullscreen mode Exit fullscreen mode

React flow:

API Response
      |
      ↓
Store Data in State
      |
      ↓
map() over Transactions
      |
      ↓
Create Transaction Components
      |
      ↓
Render UI

Enter fullscreen mode Exit fullscreen mode

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! 🚀

원문에서 계속 ↗

추출 본문 · 출처: dev.to · https://dev.to/siva_samanthapudi/react-mastery-series-day-11-rendering-lists-in-react-working-with-arrays-and-keys-5h1d

React Mastery Series – Day 11: Rendering Lists in React – Working with Arrays and Keys

Rendering Lists

What is List Rendering?

Rendering Lists Using map()

How map() Works

Rendering Lists with Objects

Why Does React Need Keys?

key

Understanding Keys with an Example

What Happens Without Keys?

Best Choice for Keys

Avoid Using Array Index as Key

Real-World Example: Transaction History

Rendering Components from Lists

Filtering Lists Before Rendering

Sorting Lists Before Rendering

Rendering Empty States

Common Mistakes

1. Forgetting Keys

2. Using Random Keys

3. Modifying Arrays Directly

List Rendering Performance

Real-World Enterprise Example

Best Practices

Key Takeaways

Coming Next 🚀

Forms in React – Building Controlled and Interactive Forms

코멘트

답글 남기기 응답 취소

더 많은 게시물

에피소드 1: “세상에 나타난 작은 점”