React › Component Composition & Children Props

How would you build a flexible component using multiple named slots instead of a single children prop?

Advanced

Answer

Instead of only accepting one block of children, a component can accept several props that each hold their own piece of content, such as a header slot and a footer slot. This gives more control over exactly where each piece of content should appear inside the layout.

function PageLayout({ header, sidebar, children }) {
  return (
    <div className="page">
      <div className="header">{header}</div>
      <div className="sidebar">{sidebar}</div>
      <div className="content">{children}</div>
    </div>
  );
}

<PageLayout header={<Navbar />} sidebar={<Filters />}>
  <ProductList />
</PageLayout>

Real-world example An admin dashboard uses named slots for its header and sidebar so each page can supply completely different navigation and filter content, while sharing the exact same overall page layout.

Common follow-ups: How is this named slot pattern different from how children works by default?;What is a good rule of thumb for deciding how many slots a component should have?

Design Patterns in React;Components & JSX