⚛️ Embedding Expressions in JSX

? Quick Overview

In JSX, you can embed JavaScript expressions directly inside your markup using curly braces { }. This lets you display variables, call functions, perform calculations, and apply conditional logic inside a component’s return statement, making your UI dynamic and data-driven.

Embedded expressions are evaluated at runtime and their results are rendered by React on the screen.

? Key Concepts

Use curly braces { } to embed JavaScript expressions inside JSX.
JSX supports expressions (like 2 + 2), not full JavaScript statements (like if, for).
You can embed variables, function calls, ternary operators, and logical && expressions.
Objects (for styles) and arrays (for lists) can also be embedded inside JSX.

? Syntax & Theory

The basic pattern is:

JSX Node + Curly Braces { } + JavaScript Expression

Whatever value the expression returns (string, number, React element, array of elements, etc.) will be rendered by React. If the expression returns null or undefined, React renders nothing for that part.

? Basic Embedding Example

You can embed variables directly into JSX using curly braces:

? View Code Example

// Embed JavaScript variables inside JSX using curly braces
const name = "Aarav";
const age = 22;
const element = (
  <h2>Hello, my name is {name} and I am {age} years old.</h2>
);

The curly braces { } tell React to evaluate the JavaScript expressions inside them and insert their results into the JSX output.

? Expressions vs Statements

JSX can contain only expressions, not full JavaScript statements:

Expression: produces a value (e.g., 2 + 2, user.name, isLoggedIn ? "Yes" : "No").
Statement: performs an action, does not directly produce a value (e.g., if, for, while).

? Valid vs Invalid Examples

// ✅ Valid: expression inside JSX
<p>2 + 2 = {2 + 2}</p>
// ❌ Invalid: statement directly inside JSX
<p>{ if (x > 10) console.log(x); }</p>

For statements like if or for, move the logic outside the JSX and use the result (an expression) inside JSX.

? Using Functions & Conditions

You can call functions inside JSX expressions. The function should return a value that React can render.

? Function Call Inside JSX

// Return a greeting message based on the user value
function greet(user) {
  return user ? "Welcome back, " + user : "Welcome, Guest";
}
const element = <h3>{greet("Aarav")}</h3>;

Conditional rendering is commonly done using the ternary operator or logical && inside braces:

? Conditional Rendering with Ternary

// Show different text based on isLoggedIn value
const isLoggedIn = true;
<p>{isLoggedIn ? "You are logged in." : "Please log in."}</p>

? Embedding Objects & Styles

You can embed JavaScript objects (for example, style objects) directly into JSX.

? Style Object Example

// Define a JS object and pass it to the style prop
const style = { color: "blue", fontSize: "22px" };
<h1 style={style}>This is styled using a JavaScript object!</h1>

When passing an object as a prop (like style), you first use curly braces for the expression, then another pair of curly braces for the object itself.

? Embedding Arrays & Lists

Arrays of elements or values can be embedded in JSX. React will render each item in the array.

? Rendering a List with map()

// Use map() to create a list of <li> elements from an array
const fruits = ["Apple", "Banana", "Cherry"];
<ul>
  {fruits.map((fruit, index) => (
    <li key={index}>{fruit}</li>
  ))}
</ul>

When rendering lists, always give each item a unique key so React can efficiently update the UI.

⚠️ Rules for Embedding Expressions

✅ You can embed any valid JavaScript expression inside { }.
✅ Avoid using statements like if, for, or while directly in JSX.
✅ Use ternary operators or logical && for conditional rendering.
✅ The expression must evaluate to a value React can render (string, number, element, array, null, etc.).

? Live Output & Explanation

? Interpreting the Basic Example

For the basic example:

<h2>Hello, my name is {name} and I am {age} years old.</h2>

If name = "Aarav" and age = 22, React evaluates the expressions {name} and {age} and renders the final HTML as:

Hello, my name is Aarav and I am 22 years old.

The JSX is never sent to the browser directly. Instead, it is compiled to plain JavaScript calls (like React.createElement), which eventually produce normal DOM elements.

? Tips & Best Practices

Keep JSX expressions short; move complex logic into helper functions above the JSX.
Use template literals or string concatenation for cleaner string formatting when needed.
When rendering lists with map(), always include a stable key prop for each element.
Avoid heavy computations inside JSX expressions; pre-compute values before the return.
Prefer readable conditional expressions (simple ternaries or extracted functions) over deeply nested logic.

? Try It Yourself

Create a component named UserInfo with variables for name, age, and country.
Use JSX expressions to display:
"Hello, {name}! You are {age} years old and live in {country}."
Add a ternary operator to conditionally show:
"You are an adult" or "You are a minor" based on the value of age.
Create an array of three hobbies and display them using map() inside JSX as a list.

Goal: Practice embedding JavaScript expressions, conditions, and arrays inside JSX to build dynamic and interactive React components.