Props

Passing Props

Props are how you pass data from parent to child components.

Basic Props

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

// Child
function Greeting({ name, age }) {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>You are {age} years old.</p>
    </div>
  );
}

Props are Read-Only

function Counter({ count }) {
  // count++ = count + 1; // This doesn't work!
  // Props are immutable
  return <p>Count: {count}</p>;
}

Passing Different Types

function UserProfile({ user, isActive, onClick }) {
  return (
    <div className={isActive ? "active" : ""}>
      <h2>{user.name}</h2>
      <button onClick={onClick}>Click me</button>
    </div>
  );
}

// Usage
<UserProfile
  user={{ name: "Alice", email: "alice@example.com" }}
  isActive={true}
  onClick={() => console.log("clicked")}
/>

Spreading Props

function Button({ label, ...rest }) {
  return <button {...rest}>{label}</button>;
}

// Usage
const props = { label: "Click", className: "btn", disabled: false };
<Button {...props} />

Default Props

Default Parameter Values (Recommended)

function Button({ label = "Click me", variant = "primary" }) {
  return (
    <button className={`btn btn-${variant}`}>
      {label}
    </button>
  );
}

// Usage
<Button /> // label="Click me", variant="primary"
<Button label="Submit" /> // variant="primary"
<Button variant="secondary" /> // label="Click me"

Default Props Object (Legacy)

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

Greeting.defaultProps = {
  name: "World"
};

// Usage
<Greeting /> // "Hello, World!"
<Greeting name="Alice" /> // "Hello, Alice!"

When to Use Each

• Default parameters: Preferred, works with TypeScript
• defaultProps: Legacy, avoid in new code

Complex Defaults

function UserCard({ user = { name: "Anonymous", avatar: "default.png" } }) {
  return (
    <div>
      <img src={user.avatar} alt={user.name} />
      <h2>{user.name}</h2>
    </div>
  );
}

Props Destructuring

Basic Destructuring

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

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

Destructuring with Defaults

function Button({ label = "Click", variant = "primary", size = "md" }) {
  return (
    <button className={`btn btn-${variant} btn-${size}`}>
      {label}
    </button>
  );
}

Renaming Variables

function UserProfile({ name: userName, email: userEmail }) {
  return (
    <div>
      <h2>{userName}</h2>
      <p>{userEmail}</p>
    </div>
  );
}

Rest Parameters

function Button({ label, onClick, ...rest }) {
  return (
    <button onClick={onClick} {...rest}>
      {label}
    </button>
  );
}

// Usage
<Button
  label="Click"
  onClick={handleClick}
  className="btn"
  disabled={false}
/>

Destructuring in Different Positions

// In function parameters
function Comp({ a, b }) { ... }

// Inside function body
function Comp(props) {
  const { a, b } = props;
  // ...
}

// In arrow functions
const Comp = ({ a, b }) => <div>{a}{b}</div>;