🚀 React Lists: A Beginner-Friendly Guide to Rendering Collections

Working with lists is one of the most common tasks in React. Whether you're displaying products, users, messages, or notifications, lists make your UI dynamic.
In this Hasenode-style blog, we’ll explore how lists work in React, why keys are important, and best practices every React developer must know.

---

🔥 What Are Lists in React?

In JavaScript, we often work with arrays. In React, we use arrays + JSX to render UI elements repeatedly.

For example:

• Showing a list of users

• Mapping through products

• Displaying comments

• Rendering menu items

React uses the map() function to loop through arrays and return JSX.

---

🧩 Rendering a Basic List in React

Here’s the simplest example of rendering a list:

function FruitList() {
  const fruits = ["Apple", "Banana", "Mango"];

  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

export default FruitList;

👉 What’s happening here?

• We created an array

• We used map() to convert each fruit into an <li> element

• We added a key, which React needs for efficient rendering

---

🗝️ Understanding Keys in React Lists

Keys help React identify list items and track changes efficiently.

❌ Wrong: Using index as key (in dynamic lists)

<li key={index}>{item}</li>

Using index can cause problems when:

• List items change order

• Items are added or removed

✔️ Correct: Use a unique ID when possible

const users = [
  { id: 1, name: "Amit" },
  { id: 2, name: "Priya" },
  { id: 3, name: "John" }
];

function UserList() {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

---

🧱 Rendering List of Components

Lists don’t have to render plain text — they can render entire components.

Example:

function User({ name }) {
  return <p>{name}</p>;
}

function UserList() {
  const users = ["Amit", "Rahul", "Sneha"];

  return (
    <>
      {users.map((user, idx) => (
        <User key={idx} name={user} />
      ))}
    </>
  );
}

This improves separation of concerns and makes components reusable.

---

🛑 Common Mistakes With Lists

❌ Missing keys

❌ Using duplicate keys

❌ Using array index as key (for dynamic lists)

❌ Adding key inside component instead of where list is rendered

Correct placement:

✔️ Key should be placed where .map() returns the element.

---

🧠 When Should You Use Index as a Key?

Index is okay only if:

• List is static

• Items will NOT be reordered

• No items will be added/removed

Example use-case:
Rendering a static menu with fixed options.

---

💡 Pro Tip: Always Keep Data + UI Separate

Instead of embedding logic inside JSX, keep arrays clean:

const menuItems = ["Home", "About", "Contact"];

Then map them into JSX.
This keeps components readable and maintainable.

---

🎯 Final Thoughts

React Lists are simple yet powerful.
By understanding .map(), keys, and best practices, you can build clean, dynamic UIs with ease.

✔️ Keys help React track items

✔️ Use map() to convert arrays to JSX

✔️ Use unique IDs instead of index

✔️ Lists can render components too