Props

Pass data between components by building the DataFlow stats cards that receive revenue and growth data from their parent component.

Props are React's way of passing data from one component to another. Think of them like function parameters, but for components. When you call a JavaScript function, you pass arguments. When you use a React component, you pass props. The DataFlow dashboard needs to display four key metrics: total revenue, active users, completed orders, and growth percentage. Instead of hardcoding these values in each stats card, you'll pass them as props from the parent component.

What Are Props

Props (short for "properties") are read-only data that flows down from parent components to child components. They're like ingredients you hand to a chef — the chef uses them to make the dish, but never changes the ingredients themselves.

// Parent component passes data
function Dashboard() {
  return <StatsCard revenue={125000} />;
}

// Child component receives data
function StatsCard(props) {
  return <h2>Revenue: ${props.revenue}</h2>;
}

What just happened?

The Dashboard component passed revenue={125000} to StatsCard. React automatically collected this into a props object. Try changing the revenue number and running again.

Notice how the child component receives all props as a single object. You access individual props using dot notation: props.revenue, props.title, and so on.

Passing Multiple Props

Real components need multiple pieces of data. The DataFlow stats cards need a title, value, change percentage, and color theme.

function Dashboard() {
  return (
    <div style={{display: 'flex', gap: '20px'}}>
      <StatsCard 
        title="Total Revenue" 
        value={125000} 
        change={12} 
        color="green"
      />
      <StatsCard 
        title="Active Users" 
        value={8430} 
        change={-3} 
        color="red"
      />
    </div>
  );
}

What just happened?

Each StatsCard received four props: title, value, change, and color. The component used conditional logic to show green for positive changes and red for negative. Try changing the change values to see different colors.

Each prop becomes a property on the props object. You can pass strings, numbers, booleans, arrays, objects, and even functions as props. React handles the passing automatically.

Destructuring Props

Writing props.title and props.value gets repetitive. JavaScript destructuring makes props cleaner to use.

// Instead of this
function StatsCard(props) {
  return <h2>{props.title}: {props.value}</h2>;
}

// Write this
function StatsCard({ title, value, change }) {
  return (
    <div>
      <h2>{title}</h2>
      <p>{value}</p>
      <span>{change}%</span>
    </div>
  );
}

What just happened?

Destructuring pulled title, value, and change directly from props. No more props. prefix needed. Much cleaner to read and write.

Destructuring is standard practice in modern React. You'll see it everywhere in production code. It makes components easier to read because you can see exactly which props a component expects.

Default Props

Sometimes a parent component might not pass all props. Your component should handle missing data gracefully by providing default values.

function StatsCard({ title = "Untitled", value = 0, change = 0 }) {
  return (
    <div style={{
      padding: '20px',
      border: '1px solid #e2e8f0',
      borderRadius: '8px'
    }}>
      <h3>{title}</h3>
      <p>{value}</p>
      <span style={{color: change >= 0 ? 'green' : 'red'}}>
        {change >= 0 ? '+' : ''}{change}%
      </span>
    </div>
  );
}

What just happened?

Three cards rendered with different props. The first has all props, the second is missing value and change (uses defaults), the third is missing title (uses "Untitled"). Default values prevent errors.

Default props make your components more robust. They prevent undefined values from breaking the UI and make components easier to use. Think of them as safety nets.

Props Are Read-Only

Here's a crucial rule: never modify props inside a component. Props flow down from parent to child, and the child should treat them as immutable data.

Never Do This

Don't modify props directly. This breaks React's data flow and causes bugs that are hard to track down.

// WRONG - Never modify props
function StatsCard({ value, change }) {
  // DON'T DO THIS
  // value = value + 1000;
  // change = change * 2;
  
  return <div>{value}</div>;
}

// RIGHT - Use props as they are
function StatsCard({ value, change }) {
  // If you need computed values, create new variables
  const formattedValue = value.toLocaleString();
  const displayChange = change > 0 ? `+${change}%` : `${change}%`;
  
  return (
    <div>
      <p>{formattedValue}</p>
      <span>{displayChange}</span>
    </div>
  );
}

What just happened?

The component created new variables for formatting without changing the original props. This is the React way — transform data for display, but keep the original props intact.

Think of props like a contract. The parent component promises to provide certain data, and the child component promises not to change it. This makes your app predictable and easier to debug.

Building the DataFlow Stats Bar

Now you'll create the complete DataFlow stats bar with four cards showing different metrics. The parent component holds all the data and passes it to each card.

function DataFlowDashboard() {
  // Dashboard data - could come from an API
  const stats = {
    revenue: 425860,
    users: 12843,
    orders: 3982,
    growth: 18.5
  };

  return (
    <div style={{padding: '20px'}}>
      <h1>DataFlow Analytics</h1>
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(4, 1fr)',
        gap: '20px',
        marginTop: '24px'
      }}>
        <MetricCard 
          title="Total Revenue" 
          value={stats.revenue} 
          prefix="$" 
          change={12.3}
          positive={true}
        />
        <MetricCard 
          title="Active Users" 
          value={stats.users} 
          change={8.7}
          positive={true}
        />
        <MetricCard 
          title="Orders" 
          value={stats.orders} 
          change={-2.1}
          positive={false}
        />
        <MetricCard 
          title="Growth Rate" 
          value={stats.growth} 
          suffix="%" 
          change={stats.growth}
          positive={true}
        />
      </div>
    </div>
  );
}

What just happened?

One reusable MetricCard component rendered four different ways. Each card received different props for title, value, formatting, and change indicators. This is the power of props — write once, use everywhere with different data.

This is exactly how companies like Airbnb and Notion build their dashboards. One flexible component that adapts to different data through props. The parent component manages the data, and child components handle the display. Props enable component composition — building complex interfaces from simple, reusable pieces. The DataFlow dashboard could have hundreds of these cards, all using the same MetricCard component with different props. Remember these key points about props: they flow down from parent to child, they're read-only inside the receiving component, you can provide default values, and destructuring makes them cleaner to use. Props are the foundation of React's component architecture.

Quiz

Up Next: State Basics

Make components interactive by learning how to store and update data that changes over time with React state.

← Previous Course Index Next →