Components, Props, and Children

Components Are Functions. That's It.

Strip away the abstractions and a React component is a JavaScript function that accepts an object (props) and returns React elements. Everything else — hooks, effects, context — layers on top of this core idea.

// This is a complete React component:
function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

// Which is identical to:
function Greeting(props) {
  return React.createElement('h1', null, 'Hello, ', props.name);
}

When React encounters <Greeting name="Alice" /> in the tree, it calls Greeting({ name: 'Alice' }) and uses the returned elements to build the UI.

Props Are Read-Only

This is not a suggestion. It is a rule React enforces conceptually and that TypeScript enforces in practice:

function UserCard({ user }) {
  // NEVER DO THIS:
  // user.name = 'Modified'; // Mutating props breaks React's model

  return <div>{user.name}</div>;
}

React assumes that if props have not changed (by reference), the component output has not changed. Mutating props violates this contract and causes bugs that are nearly impossible to trace — stale renders, missed updates, and incorrect memoization.

Children: The Most Misunderstood Prop

children is not special syntax. It is a regular prop that JSX passes automatically for nested content:

// These two are identical:
<Card>
  <p>Hello</p>
</Card>

<Card children={<p>Hello</p>} />

The compiler transforms both into createElement(Card, { children: createElement('p', null, 'Hello') }).

Children Can Be Anything

// String
<Button>Click me</Button>

// Element
<Layout><Sidebar /></Layout>

// Array of elements
<List>
  <Item />
  <Item />
  <Item />
</List>

// Function (render prop pattern)
<DataFetcher>
  {(data) => <Chart data={data} />}
</DataFetcher>

// Nothing
<EmptyWrapper></EmptyWrapper>  // children is undefined

Working with Children

React provides utilities for working with children because they can be a single element, an array, or undefined:

import { Children, cloneElement } from 'react';

function RadioGroup({ children, value, onChange }) {
  return (
    <div role="radiogroup">
      {Children.map(children, (child) =>
        cloneElement(child, {
          checked: child.props.value === value,
          onChange,
        })
      )}
    </div>
  );
}

Composition Patterns

Containment (Slots)

Components that do not know their children ahead of time use props as slots:

function PageLayout({ header, sidebar, children }) {
  return (
    <div className="page">
      <header>{header}</header>
      <aside>{sidebar}</aside>
      <main>{children}</main>
    </div>
  );
}

// Usage:
<PageLayout
  header={<NavBar />}
  sidebar={<CourseMenu />}
>
  <LessonContent />
</PageLayout>

This is more flexible than inheritance. Each slot accepts any React element — the parent component does not need to know what goes in each slot.

Specialization

A generic component configured for a specific use case:

function Dialog({ title, message, type = 'info', onClose }) {
  return (
    <div className={`dialog dialog--${type}`}>
      <h2>{title}</h2>
      <p>{message}</p>
      <button onClick={onClose}>Close</button>
    </div>
  );
}

// Specialized version:
function DeleteConfirmation({ itemName, onConfirm, onCancel }) {
  return (
    <Dialog
      title="Confirm Delete"
      message={`Are you sure you want to delete "${itemName}"?`}
      type="danger"
      onClose={onCancel}
    />
  );
}

Component as Prop

Pass entire components (not elements) as props for maximum flexibility:

function List({ items, renderItem }) {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={item.id}>{renderItem(item, index)}</li>
      ))}
    </ul>
  );
}

// Usage:
<List
  items={users}
  renderItem={(user) => <UserCard user={user} />}
/>

Production Scenario: Building a Polymorphic Button

A production component that renders as different elements based on props:

type ButtonProps = {
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  as?: 'button' | 'a' | 'link';
  href?: string;
  children: React.ReactNode;
  onClick?: () => void;
};

function Button({
  variant = 'primary',
  size = 'md',
  as = 'button',
  href,
  children,
  onClick,
}: ButtonProps) {
  const className = `btn btn--${variant} btn--${size}`;

  if (as === 'a' || href) {
    return (
      <a href={href} className={className} onClick={onClick}>
        {children}
      </a>
    );
  }

  return (
    <button className={className} onClick={onClick}>
      {children}
    </button>
  );
}

Challenge: Fix the Broken Composition

Component Composition Fix