DEV Community

Selahaddin Osmanoglu
Selahaddin Osmanoglu

Posted on

Part 4: Rendering Lists – Displaying Multiple Items in React

Welcome to Part 4 of the React for Beginners series!

Now that you’ve learned about state and events, let’s move on to something you’ll do often in real-world apps: rendering lists of data.

Think of:

  • Showing a list of users
  • Displaying todo items
  • Rendering cards for blog posts

React makes this easy with .map().

📦 The .map() Method

.map() is a JavaScript array method that transforms each item in an array.

Example:

const fruits = ['apple', 'banana', 'cherry'];
fruits.map((fruit) => <p>{fruit}</p>);
Enter fullscreen mode Exit fullscreen mode

This turns your array into a list of JSX elements.

🧪 Example: Displaying a List of Names 

function NameList() {
  const names = ['Alice', 'Bob', 'Charlie'];

  return (
    <div>
      <h2>Guest List</h2>
      <ul>
        {names.map((name, index) => (
          <li key={index}>{name}</li>
        ))}
      </ul>
    </div>
  );
}

export default NameList;
Enter fullscreen mode Exit fullscreen mode

🔑 What’s That key Prop?

React uses keys to identify each item in a list. It helps React efficiently update and re-render only the changed items.

Keys should be unique and stable. Avoid using index unless you have no better choice.

💡 Better Keys with Unique IDs

Imagine you have objects like this:

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];
Enter fullscreen mode Exit fullscreen mode

Then use:

{users.map((user) => (
  <li key={user.id}>{user.name}</li>
))}
Enter fullscreen mode Exit fullscreen mode

✅ This is preferred over using index.

🎯 Conditional Rendering Inside Lists

You can also filter, sort, or conditionally render items:

{users
  .filter((u) => u.active)
  .map((u) => (
    <li key={u.id}>{u.name}</li>
  ))}
Enter fullscreen mode Exit fullscreen mode

🧩 Component Per Item (Optional Best Practice)

If each item is complex, it’s better to use a separate component:

UserCard.jsx 

function UserCard({ name, email }) {
  return (
    <div className="card">
      <h3>{name}</h3>
      <p>{email}</p>
    </div>
  );
}

export default UserCard;
Enter fullscreen mode Exit fullscreen mode

UserList.jsx 

import UserCard from './UserCard';

const users = [
  { id: 1, name: 'Alice', email: 'alice@example.com' },
  { id: 2, name: 'Bob', email: 'bob@example.com' },
];

function UserList() {
  return (
    <div>
      {users.map((user) => (
        <UserCard key={user.id} name={user.name} email={user.email} />
      ))}
    </div>
  );
}

export default UserList;
Enter fullscreen mode Exit fullscreen mode

✍️ Challenge for You

Create a component called TodoList:

  • Show a list of todos (use dummy data).
  • Each item should include a title and status.
  • Bonus: highlight completed items with different styling.

✅ Summary

  • Use .map() to render arrays as JSX elements.
  • Always include a key prop with a unique, stable value.
  • Break items into components if they get complex.
  • You can chain .filter() or .sort() before .map() for more control.

🔜 What’s Next?

In Part 5, we’ll learn how to share state between components by lifting it up and understanding how data flows through a React app.

You’re well on your way to building full apps now! 🧠💪

Top comments (0)