Assigning a variable inside JSX without using curly braces

A common mistake in React is trying to assign or declare variables directly within JSX without using the proper JavaScript expression syntax (curly braces {}).

The Problem

// ❌ Wrong - will cause syntax error
function Component() {
  return (
    <div>
      let message = "Hello";  // Trying to declare variable in JSX
      <p>{message}</p>
    </div>
  );
}

Correct Solutions

1. Move Variable Declaration Outside JSX (Recommended)

// ✅ Correct approach
function Component() {
  const message = "Hello";  // Declare outside JSX

  return (
    <div>
      <p>{message}</p>
    </div>
  );
}

2. Use IIFE (Immediately Invoked Function Expression) for Complex Logic

// ✅ For more complex cases
function Component() {
  return (
    <div>
      {(() => {
        const message = "Hello";
        const name = "World";
        return <p>{message} {name}</p>;
      })()}
    </div>
  );
}

3. Use Ternary Operator for Conditional Assignment

// ✅ For conditional values
function Component({ isLoggedIn }) {
  return (
    <div>
      <p>{isLoggedIn ? "Welcome back!" : "Please log in"}</p>
    </div>
  );
}

Why Curly Braces Matter in JSX

1. JSX Syntax Rules:

• Regular JavaScript statements can’t be used directly in JSX
• Only expressions (that evaluate to a value) can be used inside {}

1. What Works Inside {}:

• Variable references ({myVar})
• Function calls ({myFunc()})
• Ternary operators ({cond ? a : b})
• Array methods ({items.map(...)})

1. What Doesn’t Work:

• Variable declarations (let, const, var)
• Loops (for, while)
• If statements (without ternary operator)

Common Mistakes to Avoid

1. Trying to use statements:

   // ❌ Wrong
   <div>
     if (condition) { <Component /> }
   </div>

2. Forgetting braces around expressions:

   // ❌ Wrong
   <div>
     message  // Will render as text "message"
   </div>

3. Mixing declarations and JSX:

   // ❌ Wrong
   <div>
     const x = 5;
     <p>{x}</p>
   </div>

Advanced Pattern: Immediately Returned JSX

For components that need to compute values before returning JSX:

function UserGreeting({ user }) {
  // All logic happens here, before return
  const greeting = user 
    ? `Welcome back, ${user.name}!`
    : "Please sign in";

  return (
    <div>
      <p>{greeting}</p>
    </div>
  );
}

Remember: JSX is syntactic sugar for React.createElement() calls, and can only contain JavaScript expressions, not statements. Keep your variable declarations and complex logic outside the JSX return statement for cleaner, more maintainable code.