Understanding Components and Props

Props (short for "properties") are React's way of passing data between components — always in one direction, from parent to child (one-way data flow). You can think of props as a function's parameters.

Passing Props

function UserCard({ name, role, avatarUrl }) {
  return (
    <div className="card">
      <img src={avatarUrl} alt={name} />
      <h3>{name}</h3>
      <p>{role}</p>
    </div>
  );
}

function App() {
  return (
    <UserCard
      name="Bikesh Gupta"
      role="Full Stack Developer"
      avatarUrl="/images/bikesh.jpg"
    />
  );
}

Here App is the parent, passing name, role, and avatarUrl down to the UserCard child. The child simply destructures ({ name, role, avatarUrl }) to access those values.

The children Prop

Every component receives a special children prop — this is the JSX content written between its opening and closing tags:

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

// Usage:
<Card>
  <h3>Title</h3>
  <p>This is the content inside the card.</p>
</Card>

Rules Worth Remembering

• Props are read-only — a child can never directly modify the props it receives.
• If a child needs to change the parent's data, the parent can pass down a function prop (a callback).
• To set a default value, use a default in the destructuring: function Btn({ label = 'Click' }).

Key Takeaways

• Props always flow from parent to child.
• Props are immutable — a child can only read them, never modify them.
• The children prop is what makes components composable.