La Prop Children

Parte de la sección Fundamentos del Journey de React de Coddy — lección 20 de 42.

Una prop es especial. Escribe un componente con una etiqueta de apertura Y una de cierre, y cualquier cosa que anides entre ellas llegará como la prop children:

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

<Card>
    <p>Any content!</p>
</Card>

El Card no sabe ni le importa lo que hay dentro: simplemente lo envuelve en una caja con estilo. Los componentes envolventes como cards, modales y layouts utilizan children: el componente padre proporciona el contenido, el componente hijo proporciona el marco.

Desafío

Intermedio

Crea un marco de tarjeta reutilizable.

Haz que Card renderice un <div> con className="card" que muestre sus children.
En App, usa <Card>...</Card> para envolver un <p> con id="card-text" y el texto Welcome aboard.

Pruébalo tú mismo

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>