Calculs entre accolades

Fait partie de la section Les fondamentaux du Journey React de Coddy — leçon 7 sur 42.

Les accolades ne contiennent pas seulement des variables : n'importe quelle expression JavaScript fonctionne. Mathématiques, méthodes de chaîne, appels de fonction :

const price = 6;
const quantity = 5;

return <p>Total: {price * quantity}</p>;
// affiche : Total: 30

React évalue l'expression et rend le résultat. Vous pouvez combiner du texte et des accolades librement dans un même élément :

<p>{quantity} items at {price} each</p>

Une chose qui n'a PAS sa place entre accolades : les instructions. if, for et leurs équivalents ne sont pas des expressions. Nous découvrirons leurs remplaçants adaptés au JSX dans un chapitre ultérieur.

Défi

Débutant

Créez un petit reçu. Le composant définit price et quantity.

Faites en sorte que le paragraphe avec id="total" affiche Total: 30, mais calculez le nombre à partir des variables avec *, ne tapez pas 30.

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>