Deux props

Fait partie de la section Les fondamentaux du Journey React de Coddy. Leçon 18 sur 42.

Les composants prennent couramment plusieurs props. Listez-les tous dans la déstructuration et intégrez-les dans le JSX :

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

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

Remarquez les types : name est une chaîne de caractères (guillemets), price est un nombre (accolades). Conserver les nombres en tant que nombres est important dès que vous effectuez des calculs avec eux.

Défi

Facile

Créez une gamme de produits pour la boutique.

Faites en sorte que Product reçoive les props name et price, et affiche {name} costs ${price} dans son paragraphe.
Dans App, affichez un Product avec le nom Laptop et le prix 999 (en tant que nombre !). La page doit afficher Laptop costs $999.

Essayez vous-même

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