1. Concept library
  2. Web Dev with React
  3. Module 2: Props and composition

Concept

Passing props

Props are the arguments a parent passes to a child: data, configuration and callbacks. They flow one way, down the tree, and a child never changes the props it receives.

What a session covers

The tutor works through these with you, in conversation and code. A session ends when you have shown them, not when a video does.

  1. Explain how props flow and why a child never changes them
  2. Pass data and a callback from a parent to a child
  3. Spot a child that mutates a prop and rewrite it to ask the parent

In practice

A few lines that show Passing props doing its job.

TSX
function Avatar({ src, size = 40, onClick }: {
  src: string;
  size?: number;
  onClick?: () => void;
}) {
  return <img src={src} width={size} height={size} onClick={onClick} alt="" />;
}

<Avatar src="/ada.png" size={64} onClick={() => openProfile("ada")} />

The common mistake

Watch for

Mutating a prop, such as props.items.push(x). The parent still owns that array, nothing re-renders, and the next render shows a surprising state. Ask the parent to change it through a callback.

What to know first

Your roadmap puts these before Passing props, unless you already know them.

How it stays learned

Once a session shows you understand Passing props, it comes back for review. Each review takes a minute and tells the memory model how well you still know it.

  1. Day 3First recall, while it is fresh
  2. Day 7Second, a week on
  3. Day 18Last, when it has settled

Where it leads

Topics that build on Passing props.