React Workshop Series

Day 1 · Topic 8 of 15Teaching & theory

Props

Slide companion · 58–61

Your takeaway: Pass name, title, desc, and imageSrc into one reusable ProfileCard.

How to customise your component

A component without props is stuck on one value — like a profile card that can only ever say "Ahmad". Props let you pass different data into the same component.

Props: before vs after

Without props — hardcoded, not reusable

Always Ahmad. Forever.

1function ProfileCard() {
2  return <h2>Ahmad</h2> // Always Ahmad. Forever.
3}

It's hardcoded. Even if you call it many times, it's still Ahmad — which is not useful.

With props — flexible, reusable

Same component · different people

1function ProfileCard({ name, title }) {
2  return <h2>{name} — {title}</h2>
3}
4 
5// Usage:
6<ProfileCard name="Ahmad" title="CS Student" />
7<ProfileCard name="Priya" title="Business Student" />

A — receive

Create name and title with curly braces {} as boxes to receive the values.

B — pass

Pass the values with name="Ahmad" and title="CS Student" when you use the component.

Props: parent and child components

Think of props like a package the parent sends to the child.

page.js — the parent

1// page.js (the parent)
2// Uses the component, passes props:
3<ProfileCard name="Ahmad" title="CS Student" />

ProfileCard.js — the child

1// ProfileCard.js (the child)
2// Receives and displays the props:
3function ProfileCard({ name, title }) {
4  return <div>{name} — {title}</div>
5}

One-way street

Parent feeds data down. Child displays it. Data only flows one way: parent → child.

Play: one component · three pages

Top: change lid, cup, or straw in the component — all three cups update together. Bottom: each pretend page has its own props (flavour, pearls, sugar).

Same component on three pages

1// Home, About, Menu — all import BubbleTeaCup
2<BubbleTeaCup flavour="Milk" sugar="50%" pearls />
3<BubbleTeaCup flavour="Green" sugar="100%" pearls />
4<BubbleTeaCup flavour="Black" sugar="0%" />

Bubble Tea Shop Simulator

Try me

One BubbleTeaCup component · used on three pretend pages. Change the component once — every cup updates. Change props per page — only that drink changes.

1 · Edit the component (lid · cup · straw)

Like editing BubbleTeaCup.jsx once. Watch all three pages update in one shot.

component look = { lid: "silver", cup: "clear", straw: "red" }

2 · Three pages using the same component (each has its own props)

Pretend these are different routes. Customise flavour, bubbles, and sugar on each page — the other pages stay put.

page: Home

app/page.js

teaColor="milk"

pearls=true

sugar="half"

Props for this page

page: About

app/about/page.js

teaColor="green"

pearls=true

sugar="full"

Props for this page

page: Menu

app/menu/page.js

teaColor="black"

pearls=false

sugar="none"

Props for this page

Component change = all three cups. Props change = one page only.

The ProfileCard names we will keep

name, title, desc, and imageSrc. Keeping the same names through Day 1 and Day 2 makes every later copy-and-paste step fit together.

Teaching cue: keep props progressiveShow note

Demonstrate name and title first. Once students can point to where each value is passed and received, introduce desc and imageSrc as the two fields they will add during the hands-on steps.

Checkpoint

Swap the pink lid — did Home, About, and Menu all change? Now change only Home's sugar. That's component vs props. Next up: Tailwind CSS — make the card look less ugly.

Day 1 — Props

Props

Props: before vs after

Props: parent and child components

Bubble Tea Shop Simulator