Math in Braces

Part of the Fundamentals section of Coddy's React journey — lesson 7 of 42.

The braces don't just hold variables: any JavaScript expression works. Math, string methods, function calls:

const price = 6;
const quantity = 5;

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

React evaluates the expression and renders the result. You can combine text and braces freely in one element:

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

One thing that does NOT belong in braces: statements. if, for and friends aren't expressions. We'll meet their JSX-friendly replacements in a later chapter.

Challenge

Beginner

Build a tiny receipt. The component defines price and quantity.

Make the paragraph with id="total" render Total: 30, but compute the number from the variables with *, don't type 30.

Try it yourself

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