Components & Props

Building UIs from reusable functions - how components compose, how props pass data down, and the children prop pattern.

What it is, in plain English: A component is a JavaScript function that returns JSX describing a piece of UI. Props (short for properties) are how data flows into a component — they work like function parameters, passed from a parent component to a child. Props are read-only from the child's perspective: a component never modifies its own props. Composing many small components together is the core technique for building complex UIs.

Functions that return UI, and the data passed into them

A basic component

function Greeting() {
  return <h1>Hello!</h1>;
}

// Use it like an HTML tag:
function App() {
  return (
    <div>
      <Greeting />
      <Greeting />  {/* reusable — use it as many times as you want */}
    </div>
  );
}

Props — passing data into a component

// Props are like function arguments, but passed as an object:
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return (
    <div>
      <Greeting name="Alice" />   {/* props = { name: "Alice" } */}
      <Greeting name="Bob" />     {/* props = { name: "Bob" } */}
    </div>
  );
}

Destructuring props (the common style)

// Instead of props.name, props.age — destructure directly in the function signature:
function UserCard({ name, age, role }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{age} years old, {role}</p>
    </div>
  );
}

// Usage:
<UserCard name="Alice" age={30} role="Engineer" />
{/* Note: {30} not "30" — curly braces pass it as a number, not string */}

Default prop values

function Button({ label, variant = "primary" }) {
  // If variant isn't passed, it defaults to "primary"
  return <button className={`btn-${variant}`}>{label}</button>;
}

<Button label="Save" />              {/* uses default: variant="primary" */}
<Button label="Delete" variant="danger" />  {/* overrides default */}

Props are read-only

function Counter({ initialCount }) {
  // ✗ NEVER modify props directly:
  // initialCount = initialCount + 1;   // wrong! props are read-only

  // ✓ If you need to change a value over time, use state instead (next page):
  const [count, setCount] = React.useState(initialCount);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Try It Yourself (JSX)

// Components are functions. Props are their parameters.

function Button({ label, onClick, variant = "primary" }) {
  const styles = {
    primary:   { background: "#2563eb", color: "white" },
    secondary: { background: "#e5e7eb", color: "#111" },
    danger:    { background: "#dc2626", color: "white" },
  };
  return (
    <button
      onClick={onClick}
      style={{ ...styles[variant], padding: "8px 16px", border: "none", borderRadius: "6px", margin: "4px" }}
    >
      {label}
    </button>
  );
}

function Card({ title, children }) {
  return (
    <div style={{ border: "1px solid #ddd", borderRadius: "8px", padding: "16px", margin: "8px" }}>
      <h3>{title}</h3>
      {children}
    </div>
  );
}

function App() {
  return (
    <div>
      <Card title="Welcome">
        <p>This content is passed as the 'children' prop.</p>
        <Button label="Primary" onClick={() => console.log("Primary clicked")} />
        <Button label="Danger" variant="danger" onClick={() => console.log("Danger clicked")} />
      </Card>

<Card title="User Profile">
        <UserSummary name="Alice" role="Admin" />
      </Card>
    </div>
  );
}

function UserSummary({ name, role }) {
  return (
    <div>
      <strong>{name}</strong> -- <em>{role}</em>
    </div>
  );
}

console.log("Components compose: small focused pieces build bigger UIs");

The children prop and composition patterns

children — content passed between opening and closing tags

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

// Anything between <Card> and </Card> becomes the 'children' prop:
<Card title="Stats">
  <p>Visitors: 1,204</p>
  <p>Sales: ₹45,000</p>
</Card>
// Card receives: { title: "Stats", children: <><p>Visitors...</p><p>Sales...</p></> }

Composition over configuration

// Instead of one component with many boolean flags (configuration):
// <Modal showHeader showFooter showCloseButton title="..." footerText="..." />
// ↑ gets unwieldy fast — too many props, hard to customise edge cases

// Compose smaller pieces instead (composition):
function Modal({ children }) {
  return <div className="modal">{children}</div>;
}
Modal.Header = ({ children }) => <div className="modal-header">{children}</div>;
Modal.Body   = ({ children }) => <div className="modal-body">{children}</div>;
Modal.Footer = ({ children }) => <div className="modal-footer">{children}</div>;

// Usage — flexible, each piece is independently customisable:
<Modal>
  <Modal.Header><h2>Confirm</h2></Modal.Header>
  <Modal.Body>Are you sure?</Modal.Body>
  <Modal.Footer>
    <button>Cancel</button>
    <button>Confirm</button>
  </Modal.Footer>
</Modal>

Props drilling — and why you might want Context instead

// "Props drilling" — passing a prop through many layers that don't use it themselves,
// just to get it to a deeply nested component:
function App()    { return <Layout user={user} />; }
function Layout({ user }) { return <Sidebar user={user} />; }       // doesn't use 'user' itself
function Sidebar({ user }) { return <UserMenu user={user} />; }     // doesn't use 'user' itself
function UserMenu({ user }) { return <p>{user.name}</p>; }          // finally uses it

// If this gets deep enough, Context API (covered later) avoids the drilling.

Component composition patterns and TypeScript props

// Render props pattern — pass a function as a prop, the component calls it:
function DataFetcher({ url, render }) {
  const [data, setData] = React.useState(null);
  React.useEffect(() => {
    fetch(url).then(r => r.json()).then(setData);
  }, [url]);
  return render(data);   // delegate rendering to the caller
}

// Usage:
<DataFetcher
  url="/api/users"
  render={(data) => data ? <UserList users={data} /> : <Spinner />}
/>
// (Custom hooks have mostly replaced this pattern in modern React — see Custom Hooks page)

// TypeScript props — strict typing for component contracts:
interface ButtonProps {
  label:    string;
  onClick:  () => void;
  variant?: "primary" | "secondary" | "danger";  // optional, union type
  disabled?: boolean;
}

function Button({ label, onClick, variant = "primary", disabled = false }: ButtonProps) {
  return <button onClick={onClick} disabled={disabled} className={variant}>{label}</button>;
}

How React identifies component types

React distinguishes a "host" element (<div>, a string type) from a component (a function, identified by reference equality). This is why defining a component INSIDE another component's render is a common bug — a new function reference is created on every render, so React treats it as an entirely new component type and unmounts/remounts it every time, losing all its state and triggering unnecessary effects.

Official Sources

The Codex links only to official documentation. No third-party tutorials.