Props and Data Flow

Hardcoded components are useless in a real app. Props are how you pass data into a component — they are the function arguments that make a component reusable with different values.

What props are

Props (short for properties) are the inputs to a component. A parent component passes data down to a child component through props. The child reads them and renders accordingly.

function IncomeRow({ name, amount }) {
  return (
    <li>
      {name} — ${amount.toLocaleString()}
    </li>
  );
}

{ name, amount } is destructured from the single props object React passes to every component. You can also write function IncomeRow(props) and access props.name, props.amount — but destructuring in the parameter list is cleaner.

Passing props

The parent renders the child with JSX attributes:

<IncomeRow name="Paycheck" amount={3500} />
<IncomeRow name="Freelance" amount={800} />

String values use quotes. Everything else — numbers, booleans, objects, arrays, functions — uses {}.

One-way data flow

Data in React flows down — from parent to child, never the other way. A child component cannot modify its own props. If a child needs to send something back up (a button click, a form value), it calls a function passed down as a prop. This is covered in Module 03.

This one-way flow makes data easy to trace. When something renders wrong, you follow props up the tree to find where the bad data came from.

Props in ZeroBudget

The IncomeSection will receive the array of income sources as a prop:

export default function IncomeSection({ incomeSources }) {
  return (
    <section className="income-section card">
      <h2>Income</h2>
      <ul>
        {incomeSources.map(source => (
          <IncomeRow key={source.id} name={source.name} amount={source.amount} />
        ))}
      </ul>
    </section>
  );
}

App will eventually pass real state down. For now, pass a hardcoded array to test the shape:

const sources = [
  { id: '1', name: 'Paycheck', amount: 3500 },
  { id: '2', name: 'Freelance', amount: 800 },
];

<IncomeSection incomeSources={sources} />

Default props

If a prop might not be provided, give it a default value in the destructuring:

function IncomeRow({ name = 'Unnamed', amount = 0 }) { ... }

This prevents undefined errors when a prop is accidentally omitted.

Exercise

1. Update IncomeSection to accept an incomeSources prop (an array of objects with id, name, and amount).
2. Create an IncomeRow component that accepts name and amount as props and renders a single <li>.
3. In App.jsx, create a hardcoded sources array and pass it to <IncomeSection incomeSources={sources} />.
4. Confirm both rows render with the correct names and amounts.

Recap

• Props are the inputs to a component — passed as JSX attributes, received as a destructured object.
• Strings use quotes; all other values (numbers, arrays, functions) use {}.
• Data flows one way: parent → child. Children cannot modify props.
• Render lists by mapping an array to JSX. Each item needs a unique key prop.
• Default prop values prevent errors when props are not provided.