Rendering Lists of Data in React: A Practical Guide

Previously in this course, we explored Conditional Rendering to show or hide UI elements based on logic. Now that we can control what displays, we need to handle how much displays. In a real-world movie browser, you won't hard-code every movie card; you’ll fetch a list and render it dynamically.

Why List Rendering Matters

In modern web development, data rarely comes in static chunks. Whether it's a list of movie titles, search results, or user comments, your UI must adapt to the size of your data array. Instead of manually writing a <MovieCard /> component ten times, we use JavaScript’s built-in array methods to generate our UI programmatically.

The Map Method: Your Best Friend

In React, the standard way to transform an array of data into a list of components is the map() method. Unlike a for loop, map() returns a new array, which React can then render directly into the JSX.

When you use map(), you iterate over each object in your data array and return a React component for every item.

JSX
const movies = [
  { id: 1, title: CE9178">'Inception' },
  { id: 2, title: CE9178">'The Matrix' },
  { id: 3, title: CE9178">'Interstellar' }
];

function MovieList() {
  return (
    <ul>
      {movies.map((movie) => (
        <li key={movie.id}>{movie.title}</li>
      ))}
    </ul>
  );
}

The Importance of the Key Prop

You might notice the key={movie.id} attribute in the example above. This is not optional. React uses the key prop to identify which items in a list have changed, been added, or been removed.

Without a stable, unique key, React struggles to track component identity during updates. This can lead to performance degradation or, worse, visual bugs where the wrong data appears in the wrong list item. We’ll dive deeper into how React Reconciliation: Why Keys Are Critical for List Rendering works in the next lesson, but for now, remember: always use a unique ID from your data as the key.

Worked Example: Rendering the Movie Browser

Let's advance our movie-browser project. Instead of static cards, we will map over an array of movie objects to populate our dashboard.

JSX
const movies = [
  { id: CE9178">'m1', title: CE9178">'The Shawshank Redemption', year: 1994 },
  { id: CE9178">'m2', title: CE9178">'The Godfather', year: 1972 },
  { id: CE9178">'m3', title: CE9178">'The Dark Knight', year: 2008 },
];

function MovieDashboard() {
  return (
    <div className="movie-grid">
      {movies.map((movie) => (
        <MovieCard 
          key={movie.id} 
          title={movie.title} 
          year={movie.year} 
        />
      ))}
    </div>
  );
}

By passing movie.id to the key prop and the movie details to our component props, we create a clean, scalable structure. As discussed in our lesson on React rendering: Tracing Prop Changes from Update to DOM Patch, this declarative approach ensures that whenever the movies array changes, React knows exactly which specific DOM nodes to patch.

Hands-on Exercise

1. Create a new array of 5 movie objects in your App.js (or a data file). Each object should have an id, title, and rating.
2. Use the map() method to render a list of MovieCard components.
3. Ensure each MovieCard receives the title and rating as props.
4. Add the key prop to the MovieCard instances using the unique id from your data.

Common Pitfalls

• Using the Index as a Key: It’s tempting to use (movie, index) => <li key={index}>. Avoid this! If the list is reordered, filtered, or items are added/removed, the index changes. This causes React to lose track of the component state, leading to subtle bugs.
• Missing Keys: If you forget the key prop, React will throw a warning in your browser console. It will still render, but it will be inefficient and prone to errors.
• Mapping inside the Return: Remember that map() is a JavaScript expression. It must be wrapped in curly braces {} inside your JSX to be evaluated correctly.

Recap

We've moved from static components to dynamic UI generation. By using the map() method, we can handle data of any length, and by providing a unique key prop, we ensure that React’s reconciliation engine keeps our interface fast and reliable. Mastering these patterns is essential for any React Key Prop and Component Remounting: A Practical Guide scenario you might encounter later.

Up next: The Key Prop Explained — why exactly React gets confused when keys are missing or non-unique.