Lesson 6 — Props in practice

Default props

A prop the parent does not pass arrives as undefined. Give it a default value right where you destructure it: function Price({ amount, currency = "$" }). Props are read-only inside the child — the parent owns them, and the child only displays them.

function Avatar({ size = 40 }) {
  return <img width={size} />;
}
<Avatar />          // size 40
<Avatar size={80} /> // size 80

Why it matters: sensible defaults keep components easy to use — callers only pass what is different.