Prop Destructuring & Default Values

Prop Destructuring & Default Values

Writing props.name, props.age, and props.role repeatedly can become tedious. ES6 Object Destructuring makes component code cleaner and more readable.

Destructuring Props in the Function Parameter

Instead of receiving props and accessing keys off it, destructure parameters directly inside the function signature.

// Without destructuring
function UserProfile(props) {
  return <h1>{props.name} - {props.role}</h1>;
}

// With parameter destructuring (cleaner & preferred)
function UserProfile({ name, role, isOnline }) {
  return (
    <div>
      <h1>{name} - {role}</h1>
      <p>Status: {isOnline ? "Online" : "Offline"}</p>
    </div>
  );
}

Providing Default Prop Values

JavaScript default parameters allow you to specify fallback values in case a prop is omitted by the parent component.

// Default props using ES6 default parameter values
function Button({ text = "Click Me", theme = "primary", disabled = false }) {
  return (
    <button className={`btn btn-${theme}`} disabled={disabled}>
      {text}
    </button>
  );
}

// Usage examples:
// 1. Uses defaults: renders "Click Me" with "btn-primary" class
<Button />

// 2. Overrides defaults: renders "Delete" with "btn-danger" class
<Button text="Delete" theme="danger" />

Summary & TL;DR

• Use ES6 parameter destructuring ({ name, age }) to access prop values directly.
• Assign default parameter values ({ theme = "dark" }) to handle missing props gracefully.
• Destructuring leads to cleaner, self-documenting component signatures.