Components & Props

Props — Arguments for Components

Props make components reusable. The parent passes them like attributes; the child receives one object:

function CourseCard({ title, price, level = "Beginner" }) {
  return (
    <article className="card">
      <h3>{title}</h3>
      <p>{level} · ₹{price}</p>
    </article>
  );
}

function App() {
  return (
    <section>
      <CourseCard title="Django Mastery" price={199} />
      <CourseCard title="React Pro" price={249} level="Advanced" />
    </section>
  );
}

Conventions: destructure props in the signature, give defaults with =, pass non-strings in braces (price={199}, featured={true} or just featured).

Props Are Read-Only

A component must never modify its props — they belong to the parent. Data flows one way, down the tree. If a child needs to change something, the parent passes down a function (you’ll see this constantly with state):

function DeleteButton({ onDelete }) {
  return <button onClick={onDelete}>Delete</button>;
}

// parent decides what deleting means
<DeleteButton onDelete={() => removeCourse(course.id)} />

Passing Objects & Spreading

const course = { title: "FastAPI", price: 179 };

<CourseCard {...course} />          // spread object → individual props
<CourseCard course={course} />      // or pass the whole object — pick one style per app

children — Composition’s Secret Weapon

Whatever you nest between a component’s tags arrives as the children prop:

function Card({ title, children }) {
  return (
    <div className="card">
      <h3>{title}</h3>
      <div className="card-body">{children}</div>
    </div>
  );
}

<Card title="Stats">
  <p>10,500 students</p>
  <ProgressBar value={87} />
</Card>

children lets you build layout shells — cards, modals, page sections — that wrap arbitrary content. It’s React’s version of Django’s {% block %}.

Thinking in Components

Take any UI and draw boxes around its parts — each box is a component candidate:

App
├── Navbar
├── CourseList
│   └── CourseCard  (× n)
│       ├── Thumbnail
│       └── PriceTag
└── Footer

Guidelines: a component should do one thing; if it’s hard to name, it’s doing too much; extract when you repeat markup, not before. Data lives in the lowest common parent of everything that needs it — “lifting state up”, formalised in the state topic.