[React.js] - Part 6. React Lists

Ace Lennox

20 Jan 20253 minutes to read

In React, lists are often rendered using the JavaScript map() method. This guide explains how to work with lists in React, focusing on practical examples and best practices.

Rendering Lists in React

The map() method is a common way to iterate over arrays and render lists in React. It transforms each element in an array into a React component.

Example: Rendering a List of Items

Let’s create a simple example where we display a list of car brands:

function Car(props) {
  return <li>I am a {props.brand}</li>;
}

function Garage() {
  const cars = ["Toyota", "Honda", "Ford"];
  return (
    <div>
      <h1>Cars in my garage:</h1>
      <ul>
        {cars.map((car, index) => (
          <Car key={index} brand={car} />
        ))}
      </ul>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Garage />);

What’s Happening Here?

Array Mapping: The cars array is mapped to individual <Car /> components.
Dynamic Content: Each Car component receives a brand prop with the car name.

Why Use Keys in React Lists?

React requires keys to identify which items in a list have changed, been added, or been removed. Without keys, React may re-render the entire list unnecessarily, reducing performance.

Rules for Keys:

Keys must be unique among siblings.
They can be reused across different lists.
Use a unique identifier (like an id) whenever possible.
As a last resort, the array index can be used as a key (but avoid it for dynamic lists).

Example: Adding Keys to a List

Let’s improve the previous example by assigning unique keys to each list item using an id:

function Car(props) {
  return <li>I am a {props.brand}</li>;
}

function Garage() {
  const cars = [
    { id: 1, brand: "Toyota" },
    { id: 2, brand: "Honda" },
    { id: 3, brand: "Ford" }
  ];
  return (
    <div>
      <h1>Cars in my garage:</h1>
      <ul>
        {cars.map((car) => (
          <Car key={car.id} brand={car.brand} />
        ))}
      </ul>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Garage />);

Key Improvements:

Keys for Each Item: Each Car component now has a unique key based on the car’s id.
Efficient Updates: React can efficiently update or remove specific items without re-rendering the entire list.

Example: Using Objects with Multiple Properties

If the items in the list have more than one property, you can pass additional data as props:

function Car(props) {
  return (
    <li>
      {props.brand} - Model: {props.model}
    </li>
  );
}

function Garage() {
  const cars = [
    { id: 1, brand: "Toyota", model: "Corolla" },
    { id: 2, brand: "Honda", model: "Civic" },
    { id: 3, brand: "Ford", model: "Focus" }
  ];
  return (
    <div>
      <h1>Cars in my garage:</h1>
      <ul>
        {cars.map((car) => (
          <Car key={car.id} brand={car.brand} model={car.model} />
        ))}
      </ul>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Garage />);

Best Practices for Rendering Lists

Use Unique Keys: Always use unique keys (preferably id) for each list item.
Avoid Index as a Key: Use array indices only when the list is static and items don’t change.
Break Down Components: For better readability, break down complex list items into smaller components.

Conclusion

Rendering lists is a fundamental skill in React, and using keys ensures efficient updates and performance. By following these examples and best practices, you can confidently work with lists in your React projects.

Experiment with dynamic and complex lists to master React’s list rendering capabilities!

Source Code

The complete source code for this project is available on GitHub

← [React.js] - Part 5. React Conditional Rendering

[React.js] - Part 7. React Forms →

Latest Posts

View All