Embedding Expressions in JSX

In the last lesson you learned JSX Syntax. So far your markup has shown fixed text, but a real screen rarely does:

• it shows a name, right?
• it shows a price.
• it shows a count or a result.

So how do you drop a JavaScript value into your JSX? That is exactly what this lesson is about.

🤔 Why Embed Expressions?

Picture a greeting at the top of an app, like “Hello, Riya!”. The name is not fixed. It changes for every person who logs in. So if your JSX could only hold plain text, you would be stuck writing the same name forever.

The fix is small, and it is the heart of JSX:

• you wrap a piece of JavaScript in curly braces.
• React reads the value inside and puts that value on the screen.
• so your markup stops being a static picture. It starts showing live data.

const name = "Riya";

function Greeting() {
  return <h1>Hello, {name}!</h1>;
}

That {name} is the whole idea:

• React sees the braces.
• it runs the JavaScript inside them.
• then it drops the result into the page.

Hello, Riya!

🧩 What Goes Inside the Braces

Think of the curly braces as a little window. On one side is your HTML-like markup. Through the window you can reach into JavaScript and grab a value, and whatever value comes back gets placed right there in the text.

The rule to remember is simple:

• only an expression can go inside the braces.
• an expression is any piece of JavaScript that produces a value.
• so if you can write it on the right side of const x = ..., then it is an expression, and it is allowed.

Here are the everyday things you will put inside braces:

• a variable, like {name}
• a math result, like {2 + 2}
• a function call, like {getFullName()}
• a joined string, like {firstName + " " + lastName}
• a property of an object, like {user.age}

Let’s see all of these in one small component so the pattern sinks in.

const firstName = "Alex";
const lastName = "Morgan";
const price = 40;

function shout(text) {
  return text.toUpperCase();
}

function Profile() {
  return (
    <div>
      <h1>{firstName}</h1>
      <p>Total: {price * 2} dollars</p>
      <p>{shout("welcome back")}</p>
      <p>{firstName + " " + lastName}</p>
    </div>
  );
}

Reading it line by line:

• {firstName} simply shows the value of the variable, so you get “Alex”.
• {price * 2} does the math first and then shows the result, which is 80.
• {shout("welcome back")} calls the function, gets back the returned string, and shows that.
• {firstName + " " + lastName} joins the two names with a space in between.

And here is what lands on the screen:

Alex
Total: 80 dollars
WELCOME BACK
Alex Morgan

The big takeaway:

• React does not show you the code price * 2. It runs that code and shows you the answer.
• so the braces are where JavaScript and markup meet.

🚫 Expressions Yes, Statements No

This is the one place beginners trip, so let’s be clear about it:

• you can put an expression in braces. But you cannot put a statement.
• a statement is a piece of code that does something but does not produce a value on its own.
• an if block is a statement. A for loop is a statement too.

So this does not work, because if is a statement:

// ❌ Avoid: an if statement cannot go inside braces
function Status() {
  return <p>{if (loggedIn) { return "Hi" } }</p>;
}

What you do instead is reach for a tool that returns a value. The ternary operator is an expression, so it is welcome inside braces:

// ✅ Good: a ternary is an expression, so it returns a value
function Status({ loggedIn }) {
  return <p>{loggedIn ? "Welcome back" : "Please log in"}</p>;
}

Here is a quick way to decide what is allowed:

🎯 A Real Little Component

Let’s pull it together into something that feels real. We will greet a user by name, and we will also show a value we work out from their data, like the total for a cart where each item costs the same.

function Welcome() {
  const userName = "Arjun";
  const itemPrice = 25;
  const quantity = 3;

  return (
    <div>
      <h1>Hello, {userName}!</h1>
      <p>You have {quantity} items in your cart.</p>
      <p>Your total is {itemPrice * quantity} dollars.</p>
    </div>
  );
}

Walking through it:

• we declare three values inside the component: the name, the price of one item, and how many items there are.
• {userName} drops the name straight into the greeting.
• {quantity} shows the count as plain text.
• {itemPrice * quantity} does the math right there and shows the total. No extra variable is needed, because the braces accept any expression.

On the screen the person sees:

Hello, Arjun!
You have 3 items in your cart.
Your total is 75 dollars.

Notice how natural this reads:

• the markup tells the story of the page, right?
• each pair of braces is a small gap where live data slides in.
• change userName to “Riya” and quantity to 5, and the page updates to match. That is the payoff of embedding expressions.

⚠️ Common Mistakes

A few slips come up again and again. Keep an eye out for these.

• Putting a statement in braces. An if or a for will not work. Use a ternary for choices. Use .map for lists, which you will meet later.
• Forgetting the braces. Writing <h1>Hello, name</h1> shows the literal word “name”, not the value. You need {name} for React to read the variable.
• Trying to show an object directly. Writing {user} where user is an object gives you an error. Show a property like {user.name} instead.
• Adding a semicolon inside braces. A semicolon makes it a statement. Write {price * 2}, not {price * 2;}.

// ❌ Avoid: this prints the word "name", not the value
<h1>Hello, name</h1>

// ✅ Good: braces tell React to read the variable
<h1>Hello, {name}</h1>

✅ Best Practices

Small habits keep your JSX clean and easy to read.

• Keep the logic inside braces short. If an expression gets long, work it out in a variable above the return, then drop the simple variable into the braces.
• Give your variables clear names like totalPrice or userName, so the JSX reads almost like a sentence.
• Use braces for anything dynamic, and plain text for anything that never changes. Mixing both in one line is normal and fine.
• When you need a choice, reach for the ternary. It is the expression-friendly way to pick between two values.

🧩 What You’ve Learned

• ✅ Curly braces let you put a JavaScript value right inside your JSX.
• ✅ You can embed a variable, do math, call a function, or join strings, all inside the braces.
• ✅ Only expressions (code that produces a value) are allowed inside braces.
• ✅ Statements like if and for are not allowed. Use a ternary for choices.
• ✅ React runs the code inside the braces and shows the result, so your page can display live data.

🚀 What’s Next?

You can now drop live data into the text of your JSX. Next you will learn how to feed values into the attributes of your tags, like setting an image source or a class name from a variable.

JSX Attributes