Skip to content
WANCODE
BM

Props: Passing Data to Components

15 minIntermediateReact

In this lesson

  • Pass data into a component with props and read it inside
  • Destructure props and give them default values
  • Use the special children prop to build wrapper components
  • Explain why a component must never change its own props

The big idea

Props are a component's inputs. The parent passes them like HTML attributes, and the component receives them as one object — just like arguments to a function.

A component that always shows "Kopi O" isn't very reusable. Functions solve this with parameters; components solve it with props (short for properties).

Parent passes props

JSX
<ProductCard name="Teh tarik" price={2.2} />

Component receives one object

JSX
function ProductCard(props) {
  // props = { name: "Teh tarik", price: 2.2 }
  return <h3>{props.name}</h3>;
}

Strings can use quotes. Anything else — numbers, booleans, arrays, objects, functions — goes in braces: price={2.2}, inStock={true}.

Destructuring: the everyday style

Writing props. everywhere gets noisy, so most React code destructures the props object right in the parameter list. You can also give a prop a default value that's used when the parent doesn't pass it.

JSX
function ProductCard({ name, price, size = "Regular" }) {
  return (
    <article className="card">
      <h3>{name}</h3>
      <p className="price">RM{price.toFixed(2)}</p>
      <p className="size">{size}</p>
    </article>
  );
}

<ProductCard name="Kopi O" price={2} />                  // size → "Regular"
<ProductCard name="Milo panas" price={3} size="Large" />  // size → "Large"

children: whatever you put between the tags

When you write content between a component's opening and closing tags, React passes it in a special prop called children. That's how you build wrappers like cards, panels and layouts that don't care what's inside them.

JSX
function Panel({ title, children }) {
  return (
    <section className="panel">
      <h2>{title}</h2>
      {children}
    </section>
  );
}

<Panel title="Cold drinks">
  <p>Everything here comes with ice.</p>
</Panel>

Props are read-only

Data flows one way: from parent to child. A component should only read its props, never change them. In development React even freezes the props object, so props.name = "…" throws an error. When something needs to change over time, that's state — next lesson.

Think of props like the order slip at a kopitiam: the customer (parent) writes it, the barista (component) reads it and makes the drink. The barista doesn't rewrite the slip.

All three cards say Kopi O, RM2.00. Give ProductCard two props, name and price, and use them in the JSX. Then pass a different drink to each card in App, for example <ProductCard name="Teh tarik" price={2.2} />.

Checks

  • Each card shows its own name prop
  • Each card shows its own price prop

Check understanding

Q1

<Badge label="Sale" count={3} /> — what does Badge receive as its first parameter?

Q2

Inside a component, you want to show the name in capitals. Which is correct?

Q3

In <Card><p>Hi</p></Card>, how does Card get the <p>?

What you learned

  • Props are a component's inputs, passed like attributes and received as one object.
  • Destructure in the parameter list and set defaults: ({ name, size = "Regular" }).
  • children holds whatever sits between a component's tags — perfect for wrappers.
  • Data flows one way, parent to child. Never modify props.
Preview

Console output from your code appears here.

Step 1 of 3