5 1 React Rendering data lists

In this lesson we stop hardcoding our four <ExpenseItem /> entries in the JSX and start rendering them dynamically from the expenses array we already have. To do so we use a pair of curly braces right above the first expense — curly braces are how we run a dynamic JavaScript expression directly inside JSX.

Inside those curly braces we read the props.items array passed by the parent and call the built-in map array method on it. The map method runs the callback we provide on every element of the array, and returns a new array containing whatever the callback returned each time. If you are not familiar with it, a quick search for "JS array map" will get you started. 

{props.items.map((expense) => (
  <ExpenseItem
    title={expense.title}
    amount={expense.amount}
    date={expense.date}
  />
))}

What this does

  • The callback receives each expense object in turn.
  • Because we use the arrow function with parentheses, we directly return the JSX element on the right side of the arrow.
  • For every expense, we render a single <ExpenseItem /> with the matching title, amount and date props extracted from the object.

The result is exactly the same as before — the four expense cards still appear on the page — but the JSX is now driven entirely by the data array. Adding a fifth expense to the array would immediately render a fifth card, with no extra markup to write. That is the standard React way to display dynamic lists, and we'll keep refining it in the next lessons.

Summary

This lesson covers rendering lists of data in React using the JavaScript `.map()` method to iterate through an expenses array. Students learn how to dynamically display expense items as JSX elements and bind data properties such as title, amount, and date to each rendered component. The lesson demonstrates a fundamental React pattern for transforming data arrays into visual list elements.

Key points

  • Use curly braces {} in JSX to execute dynamic JavaScript code and expressions
  • Apply the `.map()` method (a standard JavaScript array function) to transform each item in a data array into a JSX element
  • Use arrow function syntax to return JSX elements for each mapped item, creating a list of components
  • Extract and bind data properties to child components via props using dot notation (e.g., expense.title, expense.amount, expense.date)
  • Map effectively converts static arrays into dynamic, reusable rendered lists in React

FAQ

What is the `.map()` method and why is it used in React?

The `.map()` method is a standard JavaScript array function that transforms each element in an array into a new element. In React, it's essential for converting data arrays (like a list of expenses) into JSX elements that can be rendered on the page.

How do you access individual data properties when rendering a mapped list?

Use dot notation to access properties from each item in the array. For example, `expense.title`, `expense.amount`, and `expense.date` allow you to extract and display specific properties of each expense item.

Why use arrow functions with the `.map()` method in React?

Arrow function syntax provides a concise way to return JSX elements. When mapping over arrays in React, the arrow function immediately returns the component for each item, making the code readable and efficient.