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 ligne 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 name Laptop et le price 999 (sous forme de 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>