Rendering Collections: List Rendering with .map() in React

Learn the essential React pattern for transforming arrays of data into dynamic, high-performance lists in your UI.

users: ['Alice', 'Bob', 'Charlie']

Welcome! Let's learn how to display lists of data in React, like a list of users or products.

const users = ['Alice', 'Bob', 'Charlie'];

The .map() Method: From Data to UI

The `.map()` method is a standard JavaScript function for arrays. It creates a new array by calling a provided function on every element in the original array. In React, we use it to transform an array of data (like users, products, or posts) into an array of JSX elements.

The 'key' Prop: A Stable Identity

The `key` prop is a special string attribute you must include when creating lists of elements. Keys help React identify which items have changed, are added, or are removed. This gives each element a stable identity, which is crucial for performance and preventing bugs, especially in dynamic lists.

The Pattern: Mapping in JSX

To render a list, you typically embed a JavaScript expression inside JSX using curly braces ``. Inside, you call `.map()` on your data array. For each item, you return a JSX element (like an `<li>` or a custom component) and make sure to assign a unique and stable `key` to the top-level element.

The Result: A Dynamic List

Combining `.map()` with the `key` prop is the fundamental pattern for displaying collections of data in React. When the source array changes (e.g., an item is added), React uses the keys to efficiently update the DOM, ensuring your UI is always in sync with your data.

Practice Zone

Interactive Test 1: Match the Concept

Match the term to its correct description in React list rendering.

Arrastra en el orden correspondiente.

Arrastra las opciones:

key={item.id}

data.map(item => ...)

Completa el código:

Transforms data into UI______

Identifies list items______

Element returned for each item______

Unlock with Premium

Interactive Test 2: Complete the Code

Rellena los huecos en cada casilla.

const products = [{id: 1, name: 'Laptop'}, {id: 2, name: 'Mouse'}];

function ProductList() {
  return (
    <ul>
      {products.{\{map\}}(product => (
        <li {\{key\}}={product.id}>
          {product.name}
        </li>
      ))}
    </ul>
  );
}

Unlock with Premium

Practice Example: Code Editor

You have an array of user objects: const users = [{ id: 'a', name: 'Alice' }, { id: 'b', name: 'Bob' }]. Render an unordered list (<ul>) where each list item (<li>) displays a user's name.

Enunciado:

* Escribe el código a continuación. Los caracteres correctos se mostrarán en verde y los incorrectos en rojo.

function UserList() {
  const users = [
    { id: 'a', name: 'Alice' },
    { id: 'b', name: 'Bob' }
  ];

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

Unlock with Premium

Knowledge Check

Why is the 'key' prop important when rendering lists in React?

Unlock with Premium

← Previous Next →

List Rendering in Action

Rendering lists with `.map()` is a foundational React skill. It's not just for `<li>` tags—it's how you display any repeating data, from social media feeds to e-commerce product grids.

1. Rendering a List of Components

Often, you'll map your data to custom components instead of simple HTML tags. This keeps your code organized and reusable. Just pass the item data as props and remember to put the `key` on the component itself.

{users.map(user => (
  <UserCard key={user.id} user={user} />
))}

User: Alice

User: Bob

2. Filtering Before Mapping

You can easily render a subset of your data by chaining array methods. A common pattern is to `.filter()` the array first to select the items you want, and then `.map()` over the result to render them.

{products
  .filter(p => p.inStock)
  .map(p => <li key={p.id}>{p.name}</li>)
}

Laptop
Mouse

3. Handling Empty States Gracefully

What happens if your data array is empty? Mapping over it will render nothing. You can combine list rendering with conditional rendering to show a helpful message to the user.

{items.length > 0 
  ? items.map(item => <li... />)
  : <p>No items found.</p>
}

No items found.

Practical Takeaway: The `data.map(item => <Component key=item.id ... />)` pattern is one of the most common and powerful constructs in React. Mastering it is essential for building data-driven applications.

List Rendering Glossary

List Rendering: The process of dynamically generating a list of UI elements or components in React by iterating over an array of data.
`.map()` Method: A standard JavaScript array method that creates a new array by executing a function on each element of the original array. In React, this function typically returns a JSX element.
`key` Prop: A special string prop that must be added to each element inside an array to give it a stable identity. Keys help React optimize rendering by identifying which items have changed, been added, or removed.
Reconciliation: The algorithm React uses to compare the old and new trees of components to determine what changes need to be made to the actual DOM. Keys are crucial for an efficient reconciliation of lists.
Array Index as Key: Using an item's index in the array (e.g., `key=index`) is a last resort. It should only be used for static lists that will never be reordered, filtered, or have items added/removed from the middle, as it can lead to performance issues and bugs with component state.