Children and Named Slots

School pages use a shared panel frame around different content. An attendance panel contains instructions; a marks panel contains results. The frame should not need to know every possible kind of content.

Nested JSX arrives at a component as its children prop. A wrapper can render children inside its own structure. A named slot is a regular prop holding an element, useful when separate areas such as a title and footer need distinct positions.

Explain
Put caller-supplied content inside a reusable panel with children.
Trace
Use a named prop for a separate heading or action area.
Apply
Choose content placement without hard-coding each caller’s report.

Children and Slots: follow the relationship

Caller supplies content
App provides the panel’s heading and student summary.
Panel owns layout
The reusable panel chooses where its supplied content appears.
Combined interface
A consistent frame surrounds each caller’s own report.

Read this relationship alongside the complete code. This diagram explains the flow; it does not execute React.

Build the mental model

The wrapper owns the frame and the parent supplies its contents. This reverses the need to make the wrapper branch on every type of school report. A title prop and children can coexist, providing a fixed title location and a flexible body.

Decide which content is fixed

A shared panel should own the parts that remain consistent across uses, such as its section boundary and heading placement. Callers should own the changing content. This keeps the panel from becoming a collection of conditions for reports, notices, assignments and every future school feature.

Named slots are ordinary props rather than a separate browser mechanism. They help when two content areas need clear roles. Avoid adding a slot for every tiny decoration before a concrete use exists; a simple children wrapper is often enough for the first reusable frame.

Read the complete React example

Panel renders the title in a heading and children below it. In the practice, the footer element is supplied through a separate prop. React elements are values that a parent can construct and pass; their final position is determined by where the child includes them.

React · JavaScript with JSX

import React from 'react';
function Panel({ title, children }) {
  return <section><h2>{title}</h2><div>{children}</div></section>;
}
export default function App() {
  return <main><Panel title="Attendance"><p>Check names before saving.</p></Panel></main>;
}

Expected screen and behavior

Initial screen: Attendance Check names before saving.

Connect the source to the screen

React · main example

import React from 'react';
function Panel({ title, children }) {
  return <section><h2>{title}</h2><div>{children}</div></section>;
}
export default function App() {
  return <main><Panel title="Attendance"><p>Check names before saving.</p></Panel></main>;
}

Children does not mean only text, and a component should not assume it is always an array. It can be one element, several elements or absent content. Render it directly when no transformation is needed; specialized transformations require the React Children APIs.

Avoid the common mistakes

Do not pass an object such as {name: "Asha"} as visible children. Pass text, an element or another renderable value. Avoid naming a prop key when you need to read it inside the component; key is a special React identity field rather than an ordinary forwarded prop.

Practice before reading the solution

React · starting example

import React from 'react';
function Panel({ title, children }) {
  return <section><h2>{title}</h2><div>{children}</div></section>;
}
export default function App() {
  return <main><Panel title="Attendance"><p>Check names before saving.</p></Panel></main>;
}

Build a report panel with a heading, result body and separate footer.

Predict the initial visible text and explain which values determine it. Then inspect the worked solution below. Change one relevant input in your local project and check whether the screen follows your prediction. A working screen should be checked for the intended meaning, not merely the absence of an error.

Worked practice solution

The solution makes the layout positions clear without a complex abstraction. The footer holds a small element rather than a string containing HTML. Adding a different footer to another panel requires changing the caller rather than changing Panel itself.

React · JavaScript with JSX

import React from 'react';
function Panel({ title, children, footer }) {
  return <section><h2>{title}</h2><div>{children}</div><footer>{footer}</footer></section>;
}
export default function App() {
  return <main><Panel title="Asha's report" footer={<small>Reviewed by the class teacher</small>}><p>Total: 75</p></Panel></main>;
}

Expected screen and behavior

Initial screen: Asha's report Total: 75 Reviewed by the class teacher

Choose the explanation that matches React and JavaScript behavior. Review the reasoning for each alternative before moving on.

Use the idea in the next lesson

Nested JSX arrives at a component as its children prop. A wrapper can render children inside its own structure. A named slot is a regular prop holding an element, useful when separate areas such as a title and footer need distinct positions.

Continue with Conditional Rendering. Revisit Passing Props to Components when the relationship between inputs and the resulting screen needs another look.

Read the primary reference: React documentation on Children and Named Slots.

Reaching the recap and completing the quizzes are separate milestones.

Next lesson: Conditional Rendering →

Children and Named Slots