Props

Props (properties) let you pass data from a parent component to a child component. They are the primary way components communicate.

Passing Props

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

function App() {
  return <Greeting name="Alice" />;
}

Props flow one direction — parent to child, never the other way.

Destructuring Props

Destructure in the parameter for cleaner code:

// Instead of: function User(props) { props.name }
function User({ name, age }) {
  return <p>{name} is {age} years old.</p>;
}

Default Props

Use default values in destructuring:

function Button({ text = "Click me", color = "blue" }) {
  return <button style={{ color }}>{text}</button>;
}

If no prop is passed, the default is used.

The children Prop

Anything between a component’s tags becomes children:

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

<Card title="Info">
  <p>This is the card content.</p>
</Card>

Props Are Read-Only

A component must never modify its own props:

// ❌ Never do this
function User({ name }) {
  name = "Bob"; // Don't mutate props
  return <p>{name}</p>;
}

Props are immutable. Create new values instead.

Passing Any Type

Props can be any JavaScript value:

<User name="Alice" age={30} isAdmin={true} items={[1, 2, 3]} />

Strings use quotes; everything else uses {}.

Best Practices

1. Destructure props — Cleaner and more readable
2. Use default values — Handle missing props gracefully
3. Keep props minimal — Don’t pass more than needed
4. Name props clearly — isActive not flag

Common Mistakes

1. Mutating props — Props are read-only; never change them
2. Using quotes for non-strings — {age={30}} should be {age={30}} in JSX, not age="30"
3. Forgetting children — children is just another prop
4. Too many props — If a component needs 8+ props, split it up