React Props

React Props: Component Communication & Read-Only Data Passing

Props (short for properties) are custom attributes passed from a parent component down to a child component. Props allow components to remain dynamic, reusable, and decoupled from hardcoded data.

Unidirectional Data Flow

Props strictly flow in one direction: from parent to child. Props are read-only and must never be modified by the recipient child component.

flowchart TD
    Parent["Parent Component (State Owner)"] -->|"passes props (user={data})"| Child["Child Component (Read-Only)"]
    Child -->|"triggers callback prop (onSelect)"| Parent

Practical Props Example

import React from 'react';

// Child Component receiving destructured props with default values
function UserBadge({ name, role = 'Guest', isOnline, avatar }) {
  return (
    <div className="user-badge">
      <img src={avatar} alt={name} className="avatar" />
      <div className="info">
        <h4>{name}</h4>
        <span className="role">{role}</span>
        <span className={isOnline ? 'badge-green' : 'badge-gray'}>
          {isOnline ? 'Online' : 'Offline'}
        </span>
      </div>
    </div>
  );
}

// Parent Component passing props
export default function TeamList() {
  const users = [
    { id: 1, name: 'Alex Johnson', role: 'Lead Tech', isOnline: true, avatar: 'https://i.pravatar.cc/50?u=1' },
    { id: 2, name: 'Maria Garcia', role: 'UX Designer', isOnline: false, avatar: 'https://i.pravatar.cc/50?u=2' },
  ];

  return (
    <section className="team-container">
      <h2>Team Directory</h2>
      {users.map((user) => (
        <UserBadge
          key={user.id}
          name={user.name}
          role={user.role}
          isOnline={user.isOnline}
          avatar={user.avatar}
        />
      ))}
    </section>
  );
}

The children Prop

The special children prop represents JSX elements nested inside a component's opening and closing tags:

function Container({ children }) {
  return <div className="max-w-xl mx-auto p-4 border">{children}</div>;
}

// Usage:
<Container>
  <h2>Nested Content</h2>
  <p>Passed via children prop!</p>
</Container>

Best Practices & Gotchas

• Props Are Immutable: Never assign new values to props inside a child component (props.name = "New" is forbidden). If data needs to change, pass a state modifier function down from the parent.
• Destructure Props Cleanly: Destructure props directly in the function argument list (function UserCard({ title, id })) to improve readability.

Self-Check Challenge

Create a AlertBox component that accepts type ("success" | "error") and children props to display styled notification banners.