Children: Componentes contenedores

La prop children

children es una prop especial que contiene lo que pones entre las etiquetas de un componente.

Sintaxis basica

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

// Uso
<Card>
  <h2>Titulo</h2>
  <p>Este contenido es children</p>
</Card>

Componentes contenedores

function Container({ children }) {
  return (
    <div className="container mx-auto px-4">
      {children}
    </div>
  );
}

function Page() {
  return (
    <Container>
      <Header />
      <Main />
      <Footer />
    </Container>
  );
}

Ejemplo: Modal

function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null;

  return (
    <div className="modal-overlay">
      <div className="modal">
        <button onClick={onClose}>X</button>
        {children}
      </div>
    </div>
  );
}

// Uso
<Modal isOpen={showModal} onClose={() => setShowModal(false)}>
  <h2>Confirmar accion</h2>
  <p>Estas seguro?</p>
  <button>Si</button>
  <button>No</button>
</Modal>

Slots con props nombradas

function Layout({ header, sidebar, children, footer }) {
  return (
    <div className="layout">
      <header>{header}</header>
      <aside>{sidebar}</aside>
      <main>{children}</main>
      <footer>{footer}</footer>
    </div>
  );
}

// Uso
<Layout
  header={<Nav />}
  sidebar={<Menu />}
  footer={<Copyright />}
>
  <Article />
</Layout>