React Academy · Lesson

props.children Fundamentals

Pass JSX as children, render single vs multiple children, and conditional child rendering.

props.children Fundamentals is a free React Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

In this lesson you will master how to pass JSX as children, render single vs multiple children, and conditionally render children in React components.

The children Prop

Any JSX placed between a component's opening and closing tags is automatically available as `props.children`. This is how you build wrapper or layout components.

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

// Usage
<Card><p>Hello world</p></Card>

Single vs Multiple Children

When you pass a single child, `children` is a React element. When you pass multiple children, `children` is an array. The behaviour changes based on the number of children passed.

<Card>One child</Card>          // children is a string
<Card><p>A</p><p>B</p></Card>  // children is an array

Rendering Children Directly

The simplest use of children is to render them directly inside JSX. The parent controls layout and styling; the consumer controls content.

function Section({ title, children }) {
  return (
    <section>
      <h2>{title}</h2>
      <div className="content">{children}</div>
    </section>
  );
}

Conditional Children Rendering

Check whether children was passed before rendering. A component can provide a fallback if no children are supplied.

function Panel({ children }) {
  if (!children) return <p>Nothing to show</p>;
  return <div className="panel">{children}</div>;
}

Children as a Render Prop

Children can also be a **function** (render prop pattern). The parent calls it with data, and the consumer controls the rendering. This is an older pattern — custom hooks often replace it today.

function DataLoader({ children }) {
  const data = useFetchData();
  return children(data); // consumer receives data
}

<DataLoader>{data => <ul>{data.map(...)}</ul>}</DataLoader>

Passing Children as a Prop

Children does not have to use the special `{children}` slot. You can pass JSX through any prop name. This is the foundation of named slots.

function Layout({ header, footer, children }) {
  return (
    <div>
      <header>{header}</header>
      <main>{children}</main>
      <footer>{footer}</footer>
    </div>
  );
}

Default Children

You can provide default children using JavaScript default parameter syntax in destructuring. If the parent passes nothing, the default content is shown.

function Button({ children = 'Click me' }) {
  return <button>{children}</button>;
}

Fragments and Multiple Children

To return multiple elements without a wrapper div, use `React.Fragment` or the shorthand `<>...`. This is clean for layout components where an extra DOM node would break CSS.

function Row({ children }) {
  return <>{children}</>;
}

TypeScript: Typing Children

In TypeScript use `React.ReactNode` to type children — it accepts elements, strings, numbers, arrays, null, and undefined.

interface Props {
  children: React.ReactNode;
}

function Box({ children }: Props) {
  return <div>{children}</div>;
}

Quick Check

When you pass multiple JSX elements between a component's tags, what type is props.children?

Recap

props.children holds any JSX passed between tags. Single children are an element; multiple children are an array. Use conditional checks for optional children and named props for named slots.

Up Next

Next lesson: **React.Children Utilities** — you will use React.Children.map, count, and toArray to safely manipulate children regardless of their type or count.

Frequently asked questions

Is the “props.children Fundamentals” lesson free?

Yes — the full text of “props.children Fundamentals” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “props.children Fundamentals”?

Pass JSX as children, render single vs multiple children, and conditional child rendering. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “props.children Fundamentals” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

props.children Fundamentals
React.Children Utilities
Named Slots via Object Props
Cloning & Injecting Props with cloneElement

← Back to React Academy