The Children Prop

Part of the Fundamentals section of Coddy's React journey — lesson 20 of 42.

One prop is special. Write a component with an opening AND closing tag, and whatever you nest between them arrives as the children prop:

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

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

The Card doesn't know or care what's inside: it just wraps it in a styled box. Wrappers like cards, modals and layouts all use children: the parent supplies the content, the component supplies the frame.

Challenge

Medium

Build a reusable card frame.

Make Card render a <div> with className="card" that displays its children.
In App, use <Card>...</Card> to wrap a <p> with id="card-text" and the text Welcome aboard.

Try it yourself

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