React Rendering Lists

In the last lesson you learned about React Rendering Empty States. This lesson is about the opposite case: turning an array of data into a list on screen without typing one element by hand.

🤔 Why do we need to render lists?

Real apps are full of lists, and the data almost always lives in an array.

• YouTube shows a list of videos. WhatsApp shows a list of chats. Amazon shows a list of products.
• That data sits in an array, like ["Riya", "Alex", "Sam"] or a list of objects.
• You can’t type one <li> per name by hand. The list changes all the time, and it can have ten items or ten thousand.
• So you need a way to say “take this array and give me one element for each item”. That is rendering lists.

🗺️ Turning an array into elements with map

The tool for this is JavaScript’s map method, and it fits React perfectly.

• map walks through every item in the array.
• For each item, you give it back something. Here, you give back a piece of JSX.
• It returns a brand-new array, but now full of elements instead of plain data.
• React is happy to take an array of elements and put them all on screen.

Here we take an array of names and turn it into an array of list items.

const names = ["Riya", "Alex", "Sam"];

const items = names.map((name) => <li>{name}</li>);
// items is now: [<li>Riya</li>, <li>Alex</li>, <li>Sam</li>]

So map did the boring part for you. One name went in, one <li> came out, for every item in the list.

📝 Rendering a list of strings

Now let’s do it inside a real component. The map goes right inside the JSX, between curly braces.

• You write { to drop into JavaScript inside your JSX.
• Then names.map(...) runs and gives back the array of <li> elements.
• React reads that array and shows every element in order.
• This works because map returns a value, and JSX braces accept any value.

Here a component takes an array of names and renders each one as a list item.

function NameList() {
  const names = ["Riya", "Alex", "Sam"];

  return (
    <ul>
      {names.map((name) => (
        <li key={name}>{name}</li>
      ))}
    </ul>
  );
}

So the <ul> holds the list, and the map inside fills it with one <li> per name. Change the array, and the list on screen changes with it.

🔁 Why map and not a for loop

People coming from other languages often reach for a for loop here, but inside JSX that does not work.

• JSX braces only accept an expression, which is something that produces a value.
• map is an expression. It produces a value, a new array of elements. So it fits inside the braces.
• A for loop is a statement. It does not produce a value, it just runs steps. So it cannot go inside the braces.

Here is the wrong way next to the right way, so the difference is clear.

// ❌ Wrong - a for loop is a statement, it returns nothing, JSX braces reject it
<ul>
  { for (let i = 0; i < names.length; i++) { <li>{names[i]}</li> } }
</ul>

// ✅ Right - map is an expression, it returns an array of elements
<ul>
  {names.map((name) => <li key={name}>{name}</li>)}
</ul>

So remember this. Inside JSX you need something that gives back a value, and map does exactly that.

🃏 Mapping objects to components

Most real data is not plain strings. It is a list of objects, and you map those the same way.

• Each item is an object, like { id: 1, name: "Riya", role: "Designer" }.
• Inside map you read the fields you need, like user.name and user.role.
• You return a bigger piece of JSX, like a card, instead of a single line.

Here we turn an array of user objects into a list of small cards.

function UserCards() {
  const users = [
    { id: 1, name: "Riya", role: "Designer" },
    { id: 2, name: "Alex", role: "Developer" },
    { id: 3, name: "Sam", role: "Manager" },
  ];

  return (
    <div>
      {users.map((user) => (
        <div key={user.id} className="card">
          <h3>{user.name}</h3>
          <p>{user.role}</p>
        </div>
      ))}
    </div>
  );
}

So each object becomes its own card, with its name and role filled in. Same map, just a bigger element coming out each time.

🔑 Each element needs a key

You may have noticed the key on every element above. React asks for it whenever you render a list.

• A key is a special prop you put on each element in a mapped list.
• It gives React a stable id for each item, so React can tell them apart when the list changes.
• Without a key, React shows a warning, and updates to the list can behave in odd ways.
• The key should be something unique and steady, like an id from your data. Not the array index if you can avoid it.

Here is the key sitting on each item, using a unique id from the data.

{users.map((user) => (
  <div key={user.id} className="card">
    <h3>{user.name}</h3>
  </div>
))}

So for now, just always add a key with a unique value when you map. We will go deep on why keys matter, and how to pick a good one, in the very next lesson.

🧩 What You’ve Learned

• ✅ Lists in React come from arrays of data, and you turn them into elements to show on screen
• ✅ The map method walks the array and returns a new array of JSX elements, one per item
• ✅ You write the map inside JSX braces, like {items.map((item) => <li>{item}</li>)}
• ✅ map works inside JSX because it is an expression that returns a value, unlike a for loop
• ✅ Map an array of objects the same way, returning a bigger element like a card for each one
• ✅ Every element in a mapped list needs a unique key prop so React can tell items apart

🚀 What’s Next?

You can now turn any array into a list of elements with map, and you’ve met the key prop along the way. Next you’ll learn exactly why keys matter, how React uses them, and how to pick a good one.

React Keys in Lists