Rendering Lists in React — A Designer's Guide to .map()

Lists Are Everywhere in UI

Contact lists. Product grids. Notification feeds. Dropdown menus. Navigation items. Almost everything in a real UI is a list of something — a set of similar items rendered from data.

In Figma, you duplicate a component manually and populate each instance. In React, you define the item once and let the data drive how many instances appear.

This is the .map() pattern.

A Simple Contact List

Imagine you have this data:

const contacts = [
  { id: 1, name: 'Alice Johnson', email: 'alice@example.com' },
  { id: 2, name: 'Bob Chen', email: 'bob@example.com' },
  { id: 3, name: 'Carla Reyes', email: 'carla@example.com' },
];

To render this as a list:

export default function ContactList() {
  return (
    <ul className="space-y-3 p-6">
      {contacts.map((contact) => (
        <li key={contact.id} className="p-4 rounded-xl border border-gray-100 bg-white">
          <p className="font-semibold text-gray-900">{contact.name}</p>
          <p className="text-sm text-gray-500">{contact.email}</p>
        </li>
      ))}
    </ul>
  );
}

What .map() Does

.map() takes an array and transforms each item into something new. Here, it takes each contact object and turns it into a <li> element.

Think of it like a Figma "Create Component for each layer" operation — but dynamic. Add a new contact to the contacts array and a new card appears automatically. Remove one and it disappears.

The key Prop

<li key={contact.id}>

The key prop is required when rendering lists. React uses it to track which item is which, so it can update efficiently when the list changes. Always use a stable, unique value — usually an id from your data.

If you forget it, React will warn you in the console and list updates may behave unexpectedly.

Adding Boolean Properties

You can add a boolean to each object and use it for conditional rendering:

const contacts = [
  { id: 1, name: 'Alice Johnson', isFav: true },
  { id: 2, name: 'Bob Chen', isFav: false },
];

Then inside the .map():

{contact.isFav && <Star className="w-4 h-4 text-yellow-400" />}

The && means: "only render this if isFav is true." This pattern lets you conditionally show badges, icons, or states on individual items in a list — exactly the kind of thing designers do in Figma with component variants.

From List to Grid

Switching from a vertical list to a responsive grid is just a class change on the container:

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
  {contacts.map((contact) => (
    <div key={contact.id} className="...">
      {/* card content */}
    </div>
  ))}
</div>

grid-cols-1 on mobile, grid-cols-2 on tablet, grid-cols-3 on desktop. Tailwind's responsive prefixes handle the breakpoints.

The Designer's Takeaway

Understanding .map() means you can:

• Tell AI to "render these items as a grid of cards" and understand the code it produces
• Add or remove items from the data array and see the UI update instantly
• Apply conditional styling to individual items based on their properties
• Build filterable, sortable lists by combining .map() with .filter()

Lists are the bread and butter of UI. Once you understand how React renders them, you can prototype data-driven interfaces that behave like real products.