Matemáticas dentro de las llaves

Parte de la sección Fundamentos del Journey de React de Coddy — lección 7 de 42.

Las llaves no solo contienen variables: cualquier expresión de JavaScript funciona. Matemáticas, métodos de cadena, llamadas a funciones:

const price = 6;
const quantity = 5;

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

React evalúa la expresión y renderiza el resultado. Puedes combinar texto y llaves libremente en un elemento:

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

Algo que NO debe ir entre llaves: las sentencias. if, for y compañía no son expresiones. Veremos sus reemplazos compatibles con JSX en un capítulo posterior.

Desafío

Principiante

Crea un recibo pequeño. El componente define price y quantity.

Haz que el párrafo con id="total" muestre Total: 30, pero calcula el número a partir de las variables con *, no escribas 30.

Pruébalo tú mismo

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