Expressions in JSX

🔍 What Are Expressions in JSX?

In JSX, expressions are snippets of JavaScript that you can embed directly inside your markup using curly braces { }. This makes JSX incredibly powerful—it allows you to dynamically render values, run logic, and display output based on your component's state or props.

💡 Syntax: Using Curly Braces

JSX lets you write expressions inside curly braces like this:

const name = "Aditya";
const greeting = <h2>Hello, {name}! 👋</h2>;

Here, {name} is the expression. JSX evaluates it and renders the result right into the UI.

📌 Valid Expressions in JSX

Let’s look at the types of JavaScript expressions you can safely use in JSX:

• Variables: {userName}
• Function Calls: {formatDate(date)}
• Math Operations: {5 + 3}
• Logical Operators: {isLoggedIn && <p>Welcome back!</p>}
• Array Methods: {items.map(item => <li>{item}</li>)}

🧠 Expressions ≠ Statements

It’s important to remember that JSX only allows expressions—not full-blown statements. For example:

// ❌ Not allowed
if (isLoggedIn) {
  return <p>Hello</p>;
}

// ✅ Use ternary instead
{isLoggedIn ? <p>Hello</p> : <p>Please log in</p>}

🔄 Conditional Expressions

Want to show something based on a condition? JSX has you covered.

const isOnline = true;
<p>Status: {isOnline ? "Online 🟢" : "Offline 🔴"}</p>

{notifications.length > 0 && <span>🔔 You have notifications</span>}

🔢 Embedding Calculations

You can perform calculations directly within JSX to dynamically display numbers:

const price = 499;
const tax = 0.18;

<p>Total Price: ₹{price + price * tax}</p>

📃 Looping with map()

JSX doesn’t support traditional for loops, but you can use Array.map() to loop and return elements:

const fruits = ["🍎", "🍌", "🍇"];

<ul>
  {fruits.map((fruit, index) => (
    <li key={index}>{fruit}</li>
  ))}
</ul>

📦 Wrapping Multiple Expressions

You can return multiple elements by wrapping them in a parent tag or fragment:

<>
  <h3>User: {user.name}</h3>
  <p>Points: {user.points}</p>
</>

⚠️ Don't Use Expressions for Side Effects

Expressions in JSX should only be used for output—not for changing data, making API calls, or logging:

// ❌ Avoid this
{console.log("This should be in useEffect!")}

// ✅ Instead, use useEffect or event handlers

✅ Summary

Expressions in JSX are a core part of building interactive UIs with React. They let you embed logic, perform calculations, and conditionally render content—all inline with your markup. Just remember: use curly braces { } to write expressions, keep it declarative, and avoid statements or side effects.

Mastering JSX expressions will help you write cleaner, smarter React components—and make your UIs truly dynamic! 🚀