Two Props

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

Components routinely take several props. List them all in the destructuring and mix them into the JSX:

function Product({ name, price }) {
    return <p>{name} costs ${price}</p>;
}

<Product name="Laptop" price={999} />
// renders: Laptop costs $999

Notice the types: name is a string (quotes), price is a number (braces). Keeping numbers as numbers matters the moment you calculate with them.

Challenge

Easy

Build a product line for the shop.

Make Product receive name and price props and render {name} costs ${price} in its paragraph.
In App, render one Product with name Laptop and price 999 (as a number!). The page should show Laptop costs $999.

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>

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Two Props

All lessons in Fundamentals