Lección 7 de 13 · Lectura y práctica

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 ( {children} ); } // Uso .

Del concepto a la práctica

Taller de esta lección

children permite crear un marco que no conoce el contenido exacto. Es apropiado para un panel de confirmación que siempre aporta borde, título de zona y botón de cierre, mientras cada uso decide qué mensaje colocar dentro. Así evitas crear una variante del panel para cada texto.

Ejemplo resuelto

jsx

function Panel({ titulo, onClose, children }) {
  return (
    <section>
      <header><h2>{titulo}</h2><button onClick={onClose}>Cerrar</button></header>
      <div>{children}</div>
    </section>
  );
}

El padre puede insertar un resumen de reserva como contenido, sin que Panel conozca sus campos.

Pruébalo

Crea una función de cierre en el padre.
Pasa un título por prop.
Coloca un párrafo y un botón dentro del panel.
Verifica que ambos aparecen dentro de la zona de contenido.

Comprueba tu resultado

El encabezado debe conservar el título y el contenido debe cambiar sin editar Panel.

Error frecuente: escribir children como una cadena fija; corrígelo renderizando la prop recibida. No uses children para datos que el contenedor necesita interpretar, como una categoría o un identificador.

Contenedor reutilizable y cierre observable

Dentro de App declara un booleano abierto inicialtrue y renderiza una expresión condicional que muestre Panel cuando abierto sea true, con título Reserva, onClose que cambie abierto a false y un párrafo hijo Libro: Mar abierto. Importa useState. Primero se ven el encabezado Reserva, Cerrar y el párrafo; tras cerrar desaparece Panel. El contenedor recibe children como elementos y los coloca en su área de contenido; el padre conserva la decisión de mostrarlo.

Un section como el mostrado es un panel normal, no un diálogo modal completo. La clase modal del ejemplo histórico no proporciona por sí sola gestión del foco, Escape, etiquetado ni bloqueo del fondo. Si el diseño requiere un diálogo, usa una implementación con esas capacidades y revisa el retorno del foco al activador. Para aprender composición aquí mantén el panel en el flujo y no atribuyas accesibilidad modal al ejemplo. El diagrama de accesibilidad recuerda nombre claro del botón y navegación por teclado. Cambia el contenido a otro párrafo sin modificar Panel y comprueba que el título por prop sigue independiente del contenido por children.

El Padre envía titulo Reserva y children al Panel; el botón Cerrar notifica al Padre mediante onClose. — **Props y children tienen papeles distintos**
children también es una prop: aquí aporta el contenido interior y titulo aporta el encabezado del Panel. El botón Cerrar llama al callback onClose que recibió del padre; el padre decide si mantiene el panel visible.
Ver la infografía en tamaño completo ↗

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>

Sigue con React Fundamentals

Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.

Ver curso y opciones de acceso Ya soy estudiante

Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.

← Anterior: Props: Pasando datos Siguiente: Introduccion a useState →Entrar y guardar mi progreso