Embedding JavaScript in JSX

🧩 Introduction: Power of JavaScript in JSX

JSX might look like HTML, but it’s actually JavaScript under the hood. One of the coolest features of JSX is that it lets you embed JavaScript expressions directly into your markup using curly braces { }. This makes your UI dynamic, responsive, and interactive—all within a single syntax!

🟢 The Basics: Curly Braces for Expressions

To embed JavaScript in JSX, wrap your expression in curly braces:

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

Whatever’s inside the braces must be a valid JavaScript expression (not a full statement).

💡 Expressions You Can Embed

Here are the most common JavaScript expressions used in JSX:

• Variables: {username}
• Math: {price * tax}
• Function Calls: {getGreeting()}
• Conditional Logic: {isAdmin ? "Admin" : "User"}
• Loops with map(): {items.map(...)}

⚠️ What You Can't Embed

JSX doesn't allow JavaScript statements like if, for, or while inside the markup.

// ❌ Invalid
{ if (isLoggedIn) { return <p>Welcome</p>; } }

// ✅ Valid using ternary
{isLoggedIn ? <p>Welcome</p> : <p>Please log in</p>}

🧠 Embedding Functions in JSX

You can call functions inside JSX to make your UI more dynamic:

function greetUser(name) {
  return `Welcome, ${name}!`;
}

<p>{greetUser("Aditya")}</p>

🔢 Performing Calculations

You can do math inside JSX without any extra work:

const quantity = 3;
const price = 499;

<p>Total: ₹{quantity * price}</p>

🔁 Rendering Lists with map()

Array.map() is a powerful way to embed dynamic content like lists in JSX:

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

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

🔄 Conditional Rendering with Logical Operators

JSX supports inline conditional rendering using logical operators:

{isLoggedIn ? <p>Dashboard</p> : <p>Login Please</p>}

{cart.length > 0 && <p>You have items in your cart! 🛒</p>}

📌 Inline Styling with JavaScript Objects

Style your elements using JS objects inside JSX:

const styleObj = {
  color: "white",
  backgroundColor: "purple",
};

<div style={styleObj}>Styled Div</div>

Remember: use camelCase for CSS properties.

📣 JavaScript Inside JSX vs. useEffect/useState

While you can embed expressions, avoid running side-effects (like fetching data or console logs) directly inside JSX:

// ❌ Don't do this
<p>{console.log("Hello")}</p>

// ✅ Use useEffect for side effects
useEffect(() => {
  console.log("Hello");
}, []);

🧼 Clean JSX with Helper Functions

To avoid clutter, you can move complex logic into helper functions:

function getStatus(isOnline) {
  return isOnline ? "Online 🟢" : "Offline 🔴";
}

<p>Status: {getStatus(true)}</p>

✅ Conclusion: Embrace JavaScript in JSX

Embedding JavaScript in JSX is what makes React feel so powerful and natural. You can write logic and UI in the same place without jumping between files or templating languages. Just remember to keep it readable, avoid statements, and only use expressions inside curly braces.

Once you get the hang of it, you’ll feel like JSX is second nature—bringing your UI to life with just a few lines of smart, embedded code! 🚀✨