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