Props, Destructuring & Children

Props (properties) are read-only inputs to a component. Parent passes props down; child uses them in JSX. Props never change inside the child — use state for that.

Props — passing data to components

Props (properties) are read-only inputs to a component. Parent passes props down; child uses them in JSX. Props never change inside the child — use state for that.

Real-life example: Props are like a name tag at a conference. The organizer writes your name; you wear it but do not rewrite it yourself.

Basic props

function UserBadge({ name, role }) {
  return (
    <div className="badge">
      <strong>{name}</strong>
      <span>{role}</span>
    </div>
  );
}

<UserBadge name="Ravi" role="Student" />

Props Destructuring

Destructure props in the function parameter for clean code. You can also set default values.

Real-life example: Destructuring props is unpacking a delivery box at the door — take out exactly what you need instead of carrying the whole box inside.

Defaults and destructuring

function CourseCard({
  title,
  instructor = "Rishtaara Team",
  rating = 4.5,
  featured = false,
}) {
  return (
    <article className={featured ? "card featured" : "card"}>
      <h2>{title}</h2>
      <p>By {instructor}</p>
      <span>⭐ {rating}</span>
    </article>
  );
}

Children — composition with props.children

Content placed between opening and closing tags becomes props.children. Use it for wrappers, cards, and layout shells.

Real-life example: children is like a picture frame — the frame (component) stays the same; you swap the photo (children) anytime.

Props flow one way: parent → child. To share data between siblings, lift state up to their common parent.

Card with children

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

<Card title="Tip">
  <p>Practice JSX every day on Rishtaara-style mini apps.</p>
</Card>