La prop Children

Fait partie de la section Les fondamentaux du Journey React de Coddy — leçon 20 sur 42.

Une prop est spéciale. Écrivez un composant avec une balise ouvrante ET une balise fermante, et tout ce que vous imbriquez entre elles sera transmis dans la prop children :

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

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

Le Card ne sait pas et ne s'interroge pas sur ce qu'il contient : il l'enveloppe simplement dans une boîte stylisée. Les conteneurs comme les cartes, les modales et les agencements utilisent tous children : le parent fournit le contenu, le composant fournit le cadre.

Défi

Moyen

Créez un cadre de carte réutilisable.

Faites en sorte que Card rende un <div> avec className="card" qui affiche ses children.
Dans App, utilisez <Card>...</Card> pour envelopper un <p> avec id="card-text" et le texte Welcome aboard.

Essayez vous-même

<!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>