SyntaxShelf

Slot pattern

2 snippets in React

REReact

Children Prop

RE · Components
Syntax
function Wrapper({ children }) {
  return <div className="wrapper">{children}</div>;
}
Example
function Card({ children, title }) {
  return (
    <section className="card">
      <h2>{title}</h2>
      <div className="card-body">{children}</div>
    </section>
  );
}

// Usage
<Card title="Profile">
  <p>This content is passed as children.</p>
</Card>
Output
Renders a card wrapper around the paragraph.

Note children can be any renderable content: text, elements, arrays, or even functions (for render props).

Component Composition

RE · Components
Syntax
function Parent() {
  return (
    <Layout>
      <Header />
      <Content />
      <Footer />
    </Layout>
  );
}
Example
function PageLayout({ sidebar, content }) {
  return (
    <div className="layout">
      <aside>{sidebar}</aside>
      <main>{content}</main>
    </div>
  );
}

function Dashboard() {
  return (
    <PageLayout
      sidebar={<NavMenu />}
      content={<StatsPanel />}
    />
  );
}

Note Composition via props is preferred over inheritance. Passing components as props gives you flexible "slot" patterns without tightly coupling parent and child.

Frequently asked questions

How does React handle slot pattern?
React covers this with 2 copy-ready snippets on this page. The "Children Prop" snippet in React uses `function Wrapper({ children }) {`.
Which code does the React example use?
The "Children Prop" snippet uses `function Wrapper({ children }) {`, from the Components section of the React cheat sheet.
What other React snippets are shown for "slot pattern"?
Besides "Children Prop", this page also shows "Component Composition".
Is there anything to watch out for?
Yes. For "Children Prop": children can be any renderable content: text, elements, arrays, or even functions (for render props).

Browse all tasks by intent