{"id":"l-rf-2-3","courseId":"react-fundamentals","lang":"en","kind":"lesson","summary":"Build flexible components with the children prop and JSX slots, specialize generic components, and pass elements down to avoid threading props through layers.","html":"

Your Watchlist will have several boxes that look alike: a “To watch” panel, a “Watched” panel, maybe a “Recommendations” panel later. Each has a title bar, sometimes a button or two on the right, and different content inside. You could add a prop for every possible kind of content. Or you could let the caller put whatever it wants inside, the way you put anything inside a <div>.

\n

That second approach is composition, and it’s how most flexible React components are built.

\n

The children prop

\n

Anything you nest between a component’s tags arrives as a prop called children:

\n
src/components/Panel.jsx
export default function Panel({ title, children }) {\n  return (\n    <section className=\"panel\">\n      <h2>{title}</h2>\n      <div className=\"panel-body\">{children}</div>\n    </section>\n  );\n}
\n
src/App.jsx
<Panel title=\"To watch\">\n  <MovieList movies={toWatch} />\n</Panel>\n\n<Panel title=\"Watched\">\n  <p>You've watched {watched.length} movies.</p>\n</Panel>
\n

Panel doesn’t know or care what’s inside. It owns the frame (the section, the heading, the styling) and the caller owns the content. You’ve used this all along without noticing: <main> and <section> take children too.

\n

children can be anything renderable: one element, several elements, text, or nothing. Treat it as opaque and render it where it belongs. Don’t inspect it, count it or modify it; if a wrapper needs to know something about its content, that information should arrive as an ordinary prop.

\n

The payoff shows up when the design changes. If the panels get rounded corners and a shadow next month, you edit Panel once and every panel in the app updates, whatever it contains.

\n\n

More than one slot

\n

children is one slot. When a component needs content in several places, use ordinary props that hold JSX. A panel with optional buttons in its header:

\n
src/components/Panel.jsx
export default function Panel({ title, actions, children }) {\n  return (\n    <section className=\"panel\">\n      <header className=\"panel-header\">\n        <h2>{title}</h2>\n        {actions}\n      </header>\n      <div className=\"panel-body\">{children}</div>\n    </section>\n  );\n}
\n
JSX
<Panel\n  title=\"To watch\"\n  actions={<button onClick={shuffle}>Shuffle</button>}\n>\n  <MovieList movies={toWatch} />\n</Panel>
\n

If actions isn’t passed, it’s undefined, which renders nothing, so the slot is optional for free. Compare this with an API like buttons={['Shuffle', 'Clear']}: Panel would need to create the buttons, wire up handlers, handle icons and disabled states, and grow a new prop for every request. With a slot, Panel decides where things go and the caller decides what they are.

\n\n

Specialization

\n

Sometimes you want a fixed variant of a generic component. Don’t copy it; render it with preset props:

\n
src/components/Button.jsx
export function Button({ variant = 'neutral', children, ...rest }) {\n  return (\n    <button className={`btn btn-${variant}`} {...rest}>\n      {children}\n    </button>\n  );\n}\n\nexport function DangerButton(props) {\n  return <Button variant=\"danger\" {...props} />;\n}
\n

DangerButton is a Button with one decision already made. The ...rest in Button forwards everything else, such as onClick, type or disabled, to the real <button>, so callers can use it like the HTML element they already know. Fix a bug in Button and every variant gets the fix.

\n

Composition instead of prop drilling

\n

Here’s a problem every app hits. App owns the movies. Layout renders a Sidebar, and the sidebar shows a WatchCount. Only WatchCount needs the movies, but to get them there, you thread them through every level:

\n
JSX
<Layout movies={movies} />           // Layout doesn't use movies…\nfunction Layout({ movies }) {\n  return <Sidebar movies={movies} />; // …neither does Sidebar\n}
\n

Passing data through components that only forward it is called prop drilling. It’s tedious, and every intermediate component now depends on data it doesn’t use.

\n

Composition often removes it. Let App, which has the data, create the element, and let Layout place it:

\n
JSX
export default function App() {\n  return (\n    <Layout sidebar={<WatchCount movies={movies} />}>\n      <MovieList movies={movies} />\n    </Layout>\n  );\n}\n\nfunction Layout({ sidebar, children }) {\n  return (\n    <div className=\"layout\">\n      <aside>{sidebar}</aside>\n      <main>{children}</main>\n    </div>\n  );\n}
\n

Layout no longer knows movies exist. It’s a pure layout component you could reuse on any page. React also offers context for data that many distant components need, such as the current theme or the signed-in user. The React docs recommend trying composition first, and it usually works.

\n\n

Next, you’ll make components show different things depending on the data, from a “Watched” badge to an empty-state message, with conditional rendering.

\n","toc":[{"id":"sec-1","text":"The children prop","level":2},{"id":"sec-2","text":"More than one slot","level":2},{"id":"sec-3","text":"Specialization","level":2},{"id":"sec-4","text":"Composition instead of prop drilling","level":2}],"takeaways":["Whatever you put between a component’s opening and closing tags arrives as its children prop.","A prop can hold JSX, so a component can expose several named slots such as actions or footer.","Specialize a generic component by rendering it with preset props instead of copying it.","Passing ready-made elements down often removes the need to thread data through components that don’t use it."],"further":[{"title":"Passing JSX as children","url":"https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children"},{"title":"Passing Data Deeply with Context (consider composition first)","url":"https://react.dev/learn/passing-data-deeply-with-context#before-you-use-context"}],"quiz":[{"q":"

What renders inside the <section>?

\n
JSX
function Panel({ title }) {\n  return <section><h2>{title}</h2></section>;\n}\n\n<Panel title=\"To watch\">\n  <MovieList movies={movies} />\n</Panel>
\n","options":[{"text":"The heading and then the movie list.","why":"The list is passed as children, but Panel never renders children, so it’s silently dropped."},{"text":"Only the heading; the list is passed as children but Panel never renders it.","why":"Correct. Nested JSX becomes the children prop. Panel must put {children} somewhere in its output."},{"text":"An error, because Panel doesn’t declare a children parameter.","why":"React never complains about unused props. That’s why this bug is easy to miss."},{"text":"The movie list replaces the heading.","why":"Children never replace a component’s own output. They are just another prop the component may render."}],"answer":1},{"q":"

You need a Panel with a title, a body, and optional buttons in the top-right corner. Which API is the most flexible and readable?

","options":[{"text":"A buttons prop holding an array of label strings, and Panel creates the buttons.","why":"Panel would have to know about click handlers, icons and disabled states. The API grows forever."},{"text":"Separate components PanelWithButtons and PanelWithoutButtons.","why":"Copying the component for each variant doubles the code you maintain and still doesn’t cover new cases."},{"text":"Pass the whole panel markup as a string and render it with dangerouslySetInnerHTML.","why":"That throws away React’s escaping and components entirely. It’s unsafe and much harder to change."},{"text":"An actions prop that takes JSX, as in actions={<button onClick={shuffle}>Shuffle</button>}.","why":"Correct. A JSX slot lets the caller pass any elements with their own handlers, and Panel only decides where they go."}],"answer":3},{"q":"

App has the movies array. Layout renders Sidebar, which renders WatchCount, the only one that needs movies. What’s the composition fix to avoid passing movies through Layout and Sidebar?

","options":[{"text":"In App, render <Layout sidebar={<WatchCount movies={movies} />} />, and let Layout place sidebar where it belongs.","why":"Correct. App creates the element with the data it already has. Layout and Sidebar only position it and never see movies."},{"text":"Make movies a global variable that WatchCount imports.","why":"Module-level mutable data doesn’t trigger re-renders and makes components hard to test and reuse."},{"text":"Copy movies into state inside WatchCount.","why":"A second copy goes stale when App’s movies change. Data should have one owner."}],"answer":0},{"q":"

A Button component takes icon and renders <span>{icon}</span>. Which call shows a star icon?

","options":[{"text":"<Button icon={StarIcon}>Rate</Button>","why":"That passes the component function itself. React warns that functions aren’t valid as a child and renders nothing."},{"text":"<Button icon="StarIcon">Rate</Button>","why":"That passes the text “StarIcon”, which renders as those characters."},{"text":"<Button icon={<StarIcon />}>Rate</Button>","why":"Correct. <StarIcon /> is a React element, which can be rendered anywhere. A slot prop expects elements."}],"answer":2}],"exercise":{"kind":"web","mode":"react","starter":{"jsx":"function Panel({ title }) {\n // Add an actions slot in the header and render children in the body\n return (\n
\n
\n

{title}

\n
\n
\n );\n}\n\nexport default function App() {\n return (\n
\n Shuffle}>\n \n \n \n

You've watched 1 movie.

\n \n
\n );\n}\n"},"solution":{"jsx":"function Panel({ title, actions, children }) {\n return (\n
\n
\n

{title}

\n {actions}\n
\n
{children}
\n
\n );\n}\n\nexport default function App() {\n return (\n
\n Shuffle}>\n \n \n \n

You've watched 1 movie.

\n \n
\n );\n}\n"},"checks":[{"id":"two-panels","test":"const s = $$('section'); return s.length === 2 && text(s[0].querySelector('header h2')) === 'To watch' && text(s[1].querySelector('header h2')) === 'Watched';"},{"id":"children-first","test":"const s = $$('section'); return s.length === 2 && s[0].querySelectorAll('li').length === 2 && !s[0].querySelector('header li');"},{"id":"children-second","test":"const s = $$('section'); return s.length === 2 && text(s[1]).includes(\"You've watched 1 movie.\") && !s[1].querySelector('header p');"},{"id":"actions-slot","test":"const s = $$('section'); const b = s[0] && s[0].querySelector('header button'); return !!b && text(b) === 'Shuffle';"},{"id":"actions-optional","test":"const s = $$('section'); return s.length === 2 && !s[1].querySelector('button');"}],"title":"A Panel with slots","prompt":"

App already uses Panel the way it should work, but Panel ignores most of what it’s given. Update only Panel so that:

\n\n

The Watched panel has no actions, so it must render no button.

\n","hints":["Destructure two more props: function Panel({ title, actions, children }).","Render {actions} right after the <h2>. If it’s undefined, React renders nothing.","Add <div>{children}</div> after the closing </header>."],"explanation":"

Nested JSX arrives as children, and the actions prop holds an element, so both are just values Panel places in its markup. Panel decides where things go; App decides what they are. Because a missing prop is undefined and undefined renders nothing, the actions slot is optional without any if.

\n","checkLabels":{"two-panels":"Two panels titled “To watch” and “Watched”","children-first":"The To watch panel shows its two list items, outside the header","children-second":"The Watched panel shows its paragraph, outside the header","actions-slot":"The Shuffle button appears inside the To watch header","actions-optional":"The Watched panel has no button"}},"words":680,"readMinutes":3}