Matemática nas Chaves

Parte da seção Fundamentos do Journey de React da Coddy — lição 7 de 42.

As chaves não servem apenas para conter variáveis: qualquer expressão JavaScript funciona. Operações matemáticas, métodos de string, chamadas de função:

const price = 6;
const quantity = 5;

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

O React avalia a expressão e renderiza o resultado. Você pode combinar texto e chaves livremente em um elemento:

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

Uma coisa que NÃO pertence às chaves: instruções (statements). if, for e seus amigos não são expressões. Veremos seus substitutos compatíveis com JSX em um capítulo posterior.

Desafio

Iniciante

Crie um pequeno recibo. O componente define price e quantity.

Faça o parágrafo com id="total" renderizar Total: 30, mas calcule o número a partir das variáveis com *, não digite 30.

Experimente você mesmo

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