Lists & Keys Explained

In this tutorial we will learn how to render lists of elements in React and why the key prop is important. Lists are everywhere in real applications, so understanding them early will make you a much stronger React developer.

Why Lists Matter in React

Real apps often display collections of data:

A list of messages
A list of tasks
A list of products
A list of notifications

React does not have a built-in loop element. Instead, you use JavaScript’s .map() method to turn an array into multiple JSX elements.

Rendering a List with `.map()`

Create a file:

src/FruitsList.jsx

Add:

export default function FruitsList() {
  const fruits = ["Apple", "Banana", "Cherry"];
 
  return (
    <>
      <title>List Example</title>
      <meta name="description" content="Rendering lists in React 19" />
 
      <h1>Fruits</h1>
 
      <ul>
        {fruits.map(fruit => (
          <li key={fruit}>{fruit}</li>
        ))}
      </ul>
    </>
  );
}

Here is what happens:

fruits.map() loops over the array
For each item, we return a <li> element
React displays the full list on the screen

Understanding the `key` Prop

You may have noticed:

<li key={fruit}>{fruit}</li>

Every item in a list must have a key.

A key is:

A unique identifier
Used by React internally to keep track of each list item
Essential for good performance and predictable rendering

Without a key, React cannot reliably update only the changed items, which can cause visual bugs.

Why React Needs Keys

Imagine a list of items in the UI. If you:

Add a new item
Remove an item
Reorder items

React needs a way to know which element corresponds to which item.

Keys act like nametags. They help React match each item in the array with each element on the screen.

Without these nametags, React can get confused and may reuse or rearrange the wrong elements.

What Makes a Good Key?

A good key must be:

Unique
Stable (does not change over time)

Examples of good keys:

Database IDs
UUIDs
Item names (only if guaranteed unique)

Examples of bad keys:

array index (0, 1, 2...) — not stable
random values created during render — change every time

Bad keys break the connection between data and UI. Good keys help React perform accurate updates.

Rendering a List of Objects

Lists usually contain objects, not strings.

Example:

const users = [
  { id: 1, name: "Sara" },
  { id: 2, name: "Luke" },
  { id: 3, name: "Amina" }
];

Render:

export default function UsersList() {
  const users = [
    { id: 1, name: "Sara" },
    { id: 2, name: "Luke" },
    { id: 3, name: "Amina" }
  ];
 
  return (
    <>
      <title>Users List</title>
      <meta name="description" content="Rendering lists with keys" />
 
      <h1>Users</h1>
 
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </>
  );
}

Here the id is the perfect key. It uniquely identifies each user.

Rendering Components in a List

You can map directly to components.

Example:

src/UserCard.jsx

export default function UserCard({ user }) {
  return <p>{user.name}</p>;
}

Now list them:

src/UserList.jsx

import UserCard from "./UserCard.jsx";
 
export default function UserList({ users }) {
  return (
    <>
      <title>User Cards</title>
      <meta name="description" content="Rendering child components in lists" />
 
      {users.map(user => (
        <UserCard key={user.id} user={user} />
      ))}
    </>
  );
}

React uses the key to identify which <UserCard /> belongs to which user.

When You Should Never Use Index as Key

Avoid using the array index if:

You are reordering the list
You are filtering items
Items change frequently

Using the index can cause:

Incorrect updates
Flickering UI
Wrong item getting focus
Wrong elements being reused

Only use the index as a last resort and only when the list is truly static.

Lists and keys form a core piece of building real React applications. By understanding how .map() turns data into UI and why keys are required, you now have the tools to display any type of repeated content cleanly and efficiently.

React Tutorial