Props — Data Flowing Down
Our BookCard from earlier always shows The Hobbit. A card that can only ever show one book is not much of a component. Props are how a parent says, "this time, show this."
The rule
Props flow down, arrive as one object, and are read-only.
Flow down. A parent passes props to a child by writing attributes on the child's tag:
export default function App() {
return (
<main>
<BookCard title="The Hobbit" author="J. R. R. Tolkien" pages={310} />
<BookCard title="Dune" author="Frank Herbert" pages={412} />
</main>
);
}Strings can use quotes. Anything else — numbers, booleans, arrays, objects, functions — goes in braces: pages={310}, read={true}. Writing just read is shorthand for read={true}.
One object. The child receives every prop in a single object, its first parameter. Destructuring pulls out the ones you need, and you can give defaults:
function BookCard({ title, author, pages = 0 }) {
return (
<article className="book">
<h2>{title}</h2>
<p>{author} · {pages} pages</p>
</article>
);
}Read-only. A component must never change its own props. title = title.toUpperCase() inside BookCard breaks the rule. Props belong to the parent; the child only reads them. If data needs to change over time, that is a job for state, which you meet in the State section. In one line: props are handed to you; state is kept by you.
Props can carry anything, including functions. <BookCard onRemove={handleRemove} /> gives the child a function it can call to tell the parent something happened — the only way information travels back up. And when the parent re-renders with different props, the child simply re-renders with the new values; nothing needs to be copied or synced.
The shortcut
Think of props as function arguments with names. <BookCard title="Dune" pages={412} /> means roughly "call BookCard with { title: 'Dune', pages: 412 }."
Parent writes it
Apprenders<BookCard title="Dune" pages={412} />.
Typical slips the shortcut catches: forgetting the braces in the parameter (function BookCard(title) receives the whole object, not the string), and writing pages="412" when you meant a number.
Drills
Answer fast — trust the rule.
How does BookCard receive the props from <BookCard title="Dune" />?
Which passes the number 3 rather than the string "3"?
function BookCard(title) { return <h2>{title}</h2>; } is used as <BookCard title="Dune" />. What is wrong?
Inside BookCard, which is allowed?
Remember
- Props flow down, arrive as one object, and are read-only.
- Treat props as named function arguments; destructure them in the parameter list.
- Trap: missing braces around the parameter, and quotes around numbers.