Children and Fragments

Children are the content placed between an opening and closing JSX tag.

They let components compose UI instead of hard-coding every detail.

1
2
3
4
5
6
7
8
9
10
11
12

function Card({ children }) {
  return <section className="card">{children}</section>;
}

function Dashboard() {
  return (
    <Card>
      <h2>Revenue</h2>
      <p>$12,400 this month</p>
    </Card>
  );
}

Inside Card, the children prop contains the h2 and p elements.

Why children Matters

Props are great for named values.

1

<Avatar name="Ada" imageUrl="/ada.png" />

Children are better when the parent should decide the nested structure.

1
2
3
4
5

<Modal title="Delete project">
  <p>This action cannot be undone.</p>
  <button>Cancel</button>
  <button>Delete</button>
</Modal>

The Modal can provide the frame, while callers provide the content.

Building Layout Components

Components that use children often act as layout or design primitives.

1
2
3
4
5
6
7
8

function Panel({ title, children }) {
  return (
    <section className="panel">
      <h2>{title}</h2>
      <div className="panel-body">{children}</div>
    </section>
  );
}

Use it with any valid React children:

1
2
3
4

<Panel title="Account">
  <p>Email: ada@example.com</p>
  <button>Change password</button>
</Panel>

Children can be:

• strings
• numbers
• elements
• arrays of elements
• null, undefined, false, or true values that React ignores

Passing Components as Children

Children are not limited to DOM elements.

1
2
3
4
5
6
7
8

function Page() {
  return (
    <AppShell>
      <Sidebar />
      <MainContent />
    </AppShell>
  );
}

This is the foundation of React composition. Instead of making AppShell know every screen, let the caller provide the pieces.

Fragments

A component must return one root value, but sometimes adding a wrapper element creates bad markup.

1
2
3
4
5
6
7
8
9
10
11
12

function TableRows({ users }) {
  return (
    <>
      {users.map((user) => (
        <tr key={user.id}>
          <td>{user.name}</td>
          <td>{user.email}</td>
        </tr>
      ))}
    </>
  );
}

The fragment groups the rows without adding an extra DOM node.

Fragments are especially useful in:

• tables
• lists
• definition lists
• components where extra wrappers break CSS layout

Short and Long Fragment Syntax

The short syntax is concise:

1
2
3
4

<>
  <h1>Title</h1>
  <p>Body</p>
</>

The long syntax is needed when the fragment itself needs a key.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import { Fragment } from "react";

function Glossary({ terms }) {
  return (
    <dl>
      {terms.map((term) => (
        <Fragment key={term.id}>
          <dt>{term.word}</dt>
          <dd>{term.definition}</dd>
        </Fragment>
      ))}
    </dl>
  );
}

You cannot put a key on the short <>...</> fragment syntax.

Common Mistakes

• Forgetting to render {children} inside a wrapper component.
• Using extra div wrappers that break table, list, or flex/grid layout.
• Trying to pass a key to the short fragment syntax.
• Treating children as always a single element. It may be one child, many children, text, or nothing.
• Using children when named props would be clearer for simple values.

Practice Challenge

Build a Callout component.

Requirements:

• It accepts a type prop such as "info" or "warning".
• It renders its children.
• It uses className={callout callout-${type}}.
• Use it to wrap a heading and a paragraph.

Example usage:

1
2
3
4

<Callout type="warning">
  <h2>Unsaved changes</h2>
  <p>Save before leaving this page.</p>
</Callout>

Recap

Children make components flexible and composable. Fragments let you group multiple children without changing the DOM structure.