A Prop Children

Parte da seção Fundamentos do Journey de React da Coddy — lição 20 de 42.

Uma prop é especial. Escreva um componente com uma tag de abertura E uma de fechamento, e qualquer coisa que você aninhar entre elas chega como a prop children:

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

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

O Card não sabe nem se importa com o que está dentro: ele apenas o envolve em uma caixa estilizada. Wrappers como cards, modais e layouts usam children: o pai fornece o conteúdo, o componente fornece a estrutura.

Desafio

Médio

Crie um quadro de card reutilizável.

Faça o Card renderizar uma <div> com className="card" que exibe seus children.
Em App, use <Card>...</Card> para envolver um <p> com id="card-text" e o texto Welcome aboard.

Experimente você mesmo

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