🔗 Embedding Expressions in JSX
In JSX, you can embed any JavaScript expression by wrapping it in curly braces { }. This allows you to insert dynamic content directly into your UI markup.
🧠 What is an Expression?
A JavaScript expression is any valid piece of code that evaluates to a value — such as a variable, a function call, or even a calculation.
📌 Example: Embedding a Variable
const name = 'React';
const element = <h1>Welcome to {name}!</h1>;
This will render: <h1>Welcome to React!</h1>
🔧 Example: Function Call
function formatUser(user) {
return user.firstName + ' ' + user.lastName;
}
const user = { firstName: 'Jane', lastName: 'Doe' };
const element = <h2>Hello, {formatUser(user)}</h2>;
Renders: Hello, Jane Doe
➕ Example: Expressions & Calculations
const a = 5;
const b = 10;
const element = <p>Sum: {a + b}</p>;
Renders: Sum: 15
⚠️ Important Notes
- You cannot embed statements like
iforfor— only expressions are allowed. - You can use ternary expressions and logical operators for conditionals inside JSX.
- You must wrap all expressions inside curly braces
{ }.
✅ Valid JSX Embedding
<h3>{new Date().toLocaleTimeString()}</h3>
<span>{items.length > 0 ? 'In Stock' : 'Out of Stock'}</span>
