3.16 pass data via des props

In this lesson we learn how to pass data from a parent to a child component through props. The work happens in two files: App.js defines the data, and ExpenseItem.js consumes it via the props object so that it no longer relies on hardcoded constants.

Defining the data in App.js

• Create an expenses array containing four objects (toilet paper, new TV, car insurance, PC).
• Each object exposes an id, a title, an amount and a date.
• Render an <ExpenseItem /> per entry, forwarding title, amount and date as attributes.

const expenses = [
  { id: 'e1', title: 'Toilet Paper', amount: 94.12, date: new Date(2020, 7, 14) },
  { id: 'e2', title: 'New TV',       amount: 799.49, date: new Date(2021, 2, 12) },
  { id: 'e3', title: 'Car Insurance', amount: 294.67, date: new Date(2021, 2, 28) },
  { id: 'e4', title: 'New Desk (Wooden)', amount: 450,    date: new Date(2021, 5, 12) }
];

Inside ExpenseItem.js, the function signature receives a props parameter. Every place that used to show a static string is replaced by props.title, props.amount or props.date. This way React passes the four entries declared in App.js down to the same reusable component.

function ExpenseItem(props) {
  return (
    <Card className="expense-item">
      <ExpenseDate date={props.date} />
      <div className="expense-item__description">
        <h2>{props.title}</h2>
        <div className="expense-item__price">${props.amount}</div>
      </div>
    </Card>
  );
}

After saving, the UI lists the four expenses with their own titles, amounts and dates. The component itself is generic — it simply renders whatever the parent passes — and that is exactly the role of props in React. See you in the next lesson.

Summary

Learn how to pass data between React components using props. This lesson demonstrates creating an expenses component and passing multiple data values (title, amount, date) from a parent component to child components through props. Understand how props enable dynamic component behavior and reusable component patterns.

Key points

• Props are the primary mechanism for passing data from parent components to child components in React
• Access props using dot notation (props.title, props.amount, props.date) within child components
• Multiple props can be passed simultaneously to display different data in the same component template
• Props enable component reusability by allowing different data values to be passed dynamically
• Changes to parent component data automatically update child components that depend on those props
• Props create a unidirectional data flow pattern that makes component relationships clear and maintainable

FAQ

What are props in React and why are they important?

Props are arguments passed into React components that allow parent components to send data to child components. They are essential for creating reusable, dynamic components and establishing clear data flow in your application.

How do you pass multiple props from a parent component to a child component?

List each prop as an attribute on the component tag in the parent (like <ExpenseItem title={title} amount={amount} date={date} />) and access them in the child component using the props parameter (props.title, props.amount, props.date).

Can props be modified inside a child component?

No, props are read-only in React. If you need to modify data, you should use state in the parent component and pass the updated data back down through props, or use callback functions passed as props to handle changes in the parent.