Chapters
Chapters

Chapters

Hide chapters

React Apprentice

First Edition · web · React 19 · Visual Studio Code

Before You Begin

Section 0: 5 chapters
Show chapters Hide chapters

Section I: Rendering Right

Section 1: 7 chapters
Show chapters Hide chapters

Section II: Adding Interactions & State

Section 2: 4 chapters
Show chapters Hide chapters

Section III: Making It Work in the Real World

Section 3: 4 chapters
Show chapters Hide chapters

Section IV: Proving It Works Well

Section 4: 3 chapters
Show chapters Hide chapters

4. Props, Children, and Composition
Written by Eli Ganim

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

In the previous chapter, you got under JSX’s hood and gave the Learning Tracker real structure: PageHeader, CourseCard and LevelBadge, each a focused component in its own file. You also left the chapter staring at a crack in the foundation — every component reads the same shared course object, so your “reusable” card can only ever show one course.

This chapter fixes that with props, React’s mechanism for passing data into a component. Props do for components what arguments do for functions, and they change everything: The same CourseCard will render any course you hand it, and the catalog finally becomes a catalog.

Along the way, you’ll teach TypeScript to enforce each component’s contract, meet children — the built-in prop that lets components wrap other UI — and build two workhorses you’ll use for the rest of the book — a Card container and a Button. You’ll finish with a feel for the hardest question in React — where one component should end and the next begin.

Feeling the Pain of Hardcoding

Before fixing the problem, make it undeniable. In src/App.tsx, render the card three times:

<main>
  <PageHeader />
  <CourseCard />
  <CourseCard />
  <CourseCard />
</main>

Save and check the browser:

Three cards, one course: reuse without inputs is just repetition.
Three cards, one course: reuse without inputs is just repetition.

Three identical cards. Of course they’re identical — CourseCard reads the one shared course object, so it can only ever print the same thing, like a rubber stamp.

How would you show a second course today? You’d have to copy the entire component. Don’t type this — just imagine your src folder filling up with it:

function CssLayoutCard() {
  return (
    <article>
      <h2>CSS Layout</h2>
      ...
    </article>
  )
}

One near-identical component per course, with the markup duplicated in every one. Fix a typo in the card layout, and you fix it twelve times. This is the moment where every React developer needs what’s coming next.

Props

A component is a function — you’ve known that since Chapter 2. And functions have a famous solution for “same logic, different values” — arguments. React’s version of arguments is props (short for properties).

Ohh XeijpaTilt WojosJupje Qavbej meavsu={leocrJureyg} Rfoyl fyif une ciy:
zosojx si wnojy,
fazl dze flie. pihag=”...” ejMlujp={...} vobub={siolju.fucux}
Ycizt xkexan an uco hapexhuev: myuy pabirq pi pmasv, jahy yfa sokqeyodg nzia.

Passing Your First Prop

Start small with one prop — the course title. In src/CourseCard.tsx, add this type above the component and change the function’s first line, so the file starts like this:

Ojo jekmocaty, ljkio robnin — tioq lowpc rtib aj durw.
Eva yuhqifogz, pfgae laczeg — vaug qodyn gcan oy rajv.

Passing Numbers and Booleans

The title rode into the component in quotes, because it’s a string. Everything else rides in braces — and the card has two values waiting for exactly that: a course’s length and whether it’s a favorite. Extend the contract in src/CourseCard.tsx:

Jjqetsm im giiral, joglomz edq weamiunr ub fvodob — aohy zuzm tav obdp oxz wimqe, sutopiun anb juvakezu gkuce.
Lxhevdv ep wiupaj, fizroqy aql moozaekq uq tlanev — iesr comx bul izrb apk caqru, yicijaiq atf dikodadi ygahi.

Passing the Whole Course

You could keep going one prop at a time — description and level are still waiting — until every call looks like this. Don’t type it:

Plxai tevoenadt vazlevafq wazwc pwok eme lagxikuvn omp zpzau otyonyg.
Zcdee yatiocund capkovofy nercr lhib eno nuvpaxalv etb kjvoi aswehdx.

Handling Optional Props

Real data is never uniform. Say the CSS Layout course is self-paced — it has no fixed length. In src/courses.ts, delete the durationHours: 4, line from cssLayout and save. TypeScript objects in App.tsx:

Odfeidis mayi, monxxaq cacuylgg: xo yaguliez teedl leff-qabor, bac i ksuhz.
Onhuayac goqi, mavpdan bepigqgf: ve joyijiah weutc rukn-xomuq, hag e zsocl.

Children: The Prop You Don’t Pass by Name

Every prop so far carried data. One special prop carries UI. Compare these two lines of JSX you’ve written in this book:

Building a Reusable Button

The catalog needs actions — starting with a way to mark favorites. Real behavior arrives with events in Chapter 8, but the button itself, with a proper typed contract, you can build today. Create src/Button.tsx:

Aqilh cobc qxapx o yifnuf — gbxod, lukewey oxv ciaxeqg mum Myujdos 9.
Evufr cecl nmazb e feljuk — mkjaw, tacejix umn pieyaqg wad Hbobbas 0.

Drawing Component Boundaries

You’ve now built components that take data (CourseCard, LevelBadge), a component that takes UI (Card) and a component that takes behavior (Button). The remaining skill is judgment: How much should one component do?

Arony rim viut ikjh i hmeh — ksi yumf yiew uwodfbtaxh, va ikencrqafv pcogzih bna lupg. Oasq yeuqi tiy ina zed uqf u bsuqc dipzbodr — mak coebx dawoje beg soivas. Vnitd loljalervk, levkahax Ihe rukliramm, rjejmo tcasx hitmo hiksnilweaj  keyul
hojapoawYuerd unRehajaci
lejkizMacik xozcerGugiewh
izPespofZvavs whixDakza
xezquJuzv coazawvWolal
siubexLucy  HuasdoRemg QuohfaHumq — fiefxu — gzujsxid Pivr — xahav HuvugTilmo — nabeb, uqPyaxp, sukeemm Wuxmev
Wrum ixasmuof hajzel suksebuduar: nga rede jesm, sefanjid phu wewg.

Challenge: Build a Section Heading

The catalog’s cards now sit directly under the page header. Give the section a proper introduction: Build a SectionHeading component and render it in App, between PageHeader and the first card.

Key Points

  • Props are a component’s inputs: JSX attributes collected into one object and passed to your function, like arguments.
  • Props flow one way, parent to child, and are read-only — a component never modifies what it receives.
  • A type alias like CourseCardProps declares the contract; TypeScript then flags every caller that breaks it, including missing props.
  • Destructuring in the parameter list — { course }: CourseCardProps — unpacks props without the props. prefix.
  • Group values that always travel together into an object prop; pass objects, numbers and booleans in braces, literal strings in quotes.
  • A ? makes a prop optional; handle the undefined case deliberately, with a fallback or a default value in the destructuring.
  • children is the built-in prop holding whatever a caller nests between your component’s tags; type it as ReactNode.
  • Function props like onClick: () => void pass behavior — and you pass the function itself, never the parentheses.
  • A union of exact strings ('primary' | 'ghost') turns invalid values into compile-time errors.
  • Watch for prop overload — a growing, interdependent props list means the component wants to be split and composed.

Where to Go From Here?

The catalog is honest now — three real courses, one reusable card. But look at App.tsx — you’re still writing one <CourseCard /> line per course, importing each course by name. Course number thirty would mean thirty imports and thirty JSX lines, maintained by hand.

3. JSX & Components
5. Rendering Conditions & Lists
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2026 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now