📖 Notes LESSON 4 OF 18

Components & Props

⏱️ 22 min

⚛️ React

Passing Data Down the Tree

Props are how parent components hand data and behaviour down to their children — read-only, one-directional, and the foundation every larger React app is built on.

Props Patterns

Passing, Reading, Reacting

📦

Props

Passed as attributes: <CourseCard title="Python" />. Read-only inside the child.

🔧

Destructuring

Destructure in the function signature: ({ title, lessons, free }).

🔀

Conditional Rendering

{condition && <Element />} or {condition ? <A /> : <B />}.

📞

Callback Props

Passing a function down lets the child notify the parent: onEnroll={(id) => handleEnroll(id)}.

CourseCard with Props

JSX

function CourseCard({ title, lessons, free, onEnroll }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <p>{lessons} lessons</p>
      {free && <span className="badge">FREE</span>}
      <button onClick={() => onEnroll(title)}>Enroll</button>
    </div>
  );
}

// Parent passes props
function Page() {
  return (
    <CourseCard
      title="Python"
      lessons={85}
      free={true}
      onEnroll={id => console.log("Enrolled:", id)}
    />
  );
}

✅

Never modify props directly

Props flow one direction — parent to child. If a child needs to change something, it calls a callback prop (like onEnroll) so the parent updates its own state instead.

← Lesson 3: JSX Rules Lesson 5: React Foundations Quiz →