Recap: Props

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

Challenge

Easy

Chapter recap: a tiny menu built from props and children.

Make Item receive name and price props and render {name}: ${price} in its <li>.
Make Card render a <div> with className="card" that displays its children.
In App, use <Card>...</Card> to wrap the <ul id="menu">, and inside it render two Items: name Tea with price 3, then name Cake with price 5 (prices as numbers!).

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>

Recap: Props

All lessons in Fundamentals