Lesson 13 — Lists & Keys in React

by

Introduction 😊

In real applications, data rarely comes as a single item.

You often need to display:

  • A list of users 👥
  • Products in an e-commerce site 🛒
  • Survey questions 📋
  • Menu items 🍔

In React, we use Lists to render multiple items and Keys to help React manage them efficiently.

In this lesson, you will learn:

  • What lists are in React
  • How to render lists using map()
  • What keys are
  • Why keys are important
  • Common mistakes beginners make

Let’s start 🚀

What Are Lists in React? 🤔

A list is simply an array of data that you want to display on the UI.

Example:

const fruits = ["Apple", "Banana", "Mango"];

In React, we usually render lists using the JavaScript map() method.

Rendering a List Using map() 🔁

Example: Simple List

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

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

👉 map() loops over each item and returns JSX.

What Are Keys in React? 🔑

A key is a special attribute used by React to identify each item in a list.

👉 Keys help React:

  • Track changes
  • Improve performance
  • Update only the required items

Adding Keys to List Items ✅

Let’s improve the previous example by adding keys.

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

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

📌 key should be:

  • Unique
  • Stable

Using ID as Key (Best Practice ⭐)

Using array index as a key works, but it is not recommended for dynamic lists.

Better Approach:

const users = [
  { id: 1, name: "Avni" },
  { id: 2, name: "Palak" },
  { id: 3, name: "Aarav" }
];

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

👉 Always prefer unique IDs as keys.

Rendering List of Components 🧩

You can also render components inside a list.

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

function App() {
  const users = ["Avni", "Palak", "Aarav"];

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

👉 This improves reusability.

Why Keys Are Important 🧠

Without keys, React may:

  • Re-render unnecessary elements
  • Cause performance issues
  • Show incorrect UI updates

👉 Keys help React efficiently update the DOM.

Common Mistakes Beginners Make ❌

  • Forgetting to add keys
  • Using non-unique keys
  • Using index as key for dynamic data
  • Adding key to wrong element

💡 Always add key to the top-level element inside map().

When Can You Use Index as Key? 🤔

You can use index as key only when:

  • List is static
  • Items never change order
  • Items are never added or removed

Otherwise, avoid it 🚫

Conclusion 🎯

Lists and keys are essential for rendering dynamic data in React.

Key takeaways:

  • Use map() to render lists
  • Keys uniquely identify list items
  • Prefer unique IDs over index
  • Proper keys improve performance and correctness

👉 If you understand lists and keys, you can build real-world UIs easily 💙

Frequently Asked Questions (FAQs) ❓

Are keys mandatory in React?

Yes, keys are required when rendering lists.

Can two items have the same key?

No. Keys must be unique.

Where should I place the key?

On the top-level element returned by map().

What’s Next? 🚀

👉 In the next lesson, we will learn:

Lesson 14 — Introduction to React Hooks
Understanding what hooks are and why they were introduced.

Leave a Comment