🔍 Reading Props in Components — Accessing Your Data

Once props are passed to a component, you need a way to access them. React provides a clean, simple way to extract and use props using destructuring in your function parameters.

🎯 Destructuring Props in Function Parameters

Destructuring extracts specific props directly in the function definition, making them instantly available as variables. This is the recommended and most readable approach:

When you destructure props, you name them exactly as they're passed, and they become available immediately in your component. This makes the code cleaner and shows at a glance what data your component needs.

function Welcome({ name, age }) {
  return <p>Hello {name}, you are {age} years old</p>;
}

// Usage
<Welcome name="Alice" age={28} />

<details>

<summary>📚 More Examples</summary>

// Multiple props destructured
function UserCard({ username, bio, postCount }) {
  return (
    <div>
      <h2>{username}</h2>
      <p>{bio}</p>
      <p>Posts: {postCount}</p>
    </div>
  );
}

// Without destructuring (less readable)
function UserCard(props) {
  return (
    <div>
      <h2>{props.username}</h2>
      <p>{props.bio}</p>
      <p>Posts: {props.postCount}</p>
    </div>
  );
}

</details>

💡 Default Values in Destructuring

You can provide default values for props that might not be passed. If a prop is missing, the default value is used instead:

Default values make your components more flexible. If someone uses your component without providing a prop, it will still work with a sensible fallback value.

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

// All of these work
<Button /> // Uses both defaults
<Button text="Save" /> // Custom text, default color
<Button color="red" /> // Default text, custom color

<details>

<summary>📚 More Examples</summary>

// Real-world: Form input with defaults
function TextInput({ placeholder = "Enter text", maxLength = 100 }) {
  return <input placeholder={placeholder} maxLength={maxLength} />;
}

// Using special children prop with default
function Card({ title, children = <p>No content</p> }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      {children}
    </div>
  );
}

</details>

🎨 The Special `children` Prop

React has a special prop called `children` that receives content between your component's opening and closing tags. This lets you create flexible wrapper components.

The `children` prop automatically contains whatever is placed inside your component tags. You can render it just like any other data, making your components act as containers.

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

// Usage - anything between tags becomes children
<Card title="Welcome">
  <p>This is the children prop!</p>
</Card>

<details>

<summary>📚 More Examples</summary>

// Modal component with children
function Modal({ isOpen, children }) {
  if (!isOpen) return null;
  return (
    <div className="modal-overlay">
      <div className="modal-content">
        {children}
      </div>
    </div>
  );
}

// Multiple children elements work too
<Modal isOpen={true}>
  <h2>Confirm Action</h2>
  <p>Are you sure?</p>
  <button>Yes</button>
  <button>No</button>
</Modal>

</details>

🔑 Key Takeaways

• ✅ Access props by destructuring in function parameters

• ✅ Use destructuring to make code cleaner and more readable

• ✅ You can provide default values for props

• ✅ The special `children` prop contains content between opening/closing tags

• ✅ Props are immutable—don't modify them

Ready to practice? Challenges | Next: Props for Customization