Composición con children: componentes que envuelven

Hasta ahora tus componentes reciben datos por props. Pero hay una prop especial que recibe OTROS componentes: children. Con ella construyes contenedores reutilizables —una <Tarjeta> que envuelve cualquier contenido, un <Modal>, un layout—. Es la composición, la forma más elegante y flexible de combinar piezas en React.

El marco que enmarca cualquier cuadro

La prop children

Todo lo que pongas ENTRE las etiquetas de apertura y cierre de un componente llega a ese componente como la prop children:

Lo que va entre <Tarjeta> y </Tarjeta> llega como children, y el componente lo pinta donde ponga {children}. Fíjate en el tipo: children: ReactNode es el tipo de TypeScript para "cualquier cosa que React pueda renderizar" (JSX, texto, números, listas). La misma <Tarjeta> envuelve un gasto o un total —aporta el marco, tú el contenido.

Composición sobre configuración

Este patrón escala a contenedores más ricos —modales, layouts, paneles— que verás por todo React: cada uno aporta su comportamiento (un modal centra y oscurece el fondo, un layout organiza) y recibe su contenido por children. La app entera termina siendo componentes que se envuelven unos a otros, como muñecas rusas de UI.

Mini-reto

Crea contenedores: 1) haz un componente <Alerta> con props tipo ("info" | "error") y children, que pinte un recuadro de color según el tipo y muestre el children dentro; 2) úsalo dos veces con contenidos distintos (uno con solo texto, otro con un título y un botón); 3) bonus: agrega una prop opcional onCerrar? que muestre una "X" si se pasa. Sientes cómo un buen contenedor envuelve cualquier cosa.

Qué sigue

Módulo 1 cerrado: dominas componentes, props, listas, eventos y composición —las piezas estáticas de React—. El reto del módulo las junta en una primera "Mi Bolsillo" hecha de componentes. Pero todo lo que has visto es INMÓVIL: para que la UI cambie con la interacción, falta la pieza mágica —el ESTADO—, y ese es todo el módulo 2.