Correct Variable Usage in JSX

In JSX, you can’t directly assign variables or execute statements without wrapping them in curly braces {}. Here’s how to properly handle variable assignment and usage within JSX:

The Problem

Invalid JSX (will cause error):

function MyComponent() {
  return (
    <div>
      let message = "Hello";  // ❌ Cannot assign variables directly in JSX
      <p>{message}</p>
    </div>
  );
}

Correct Solutions

1. Assign Variables Before Return

function MyComponent() {
  const message = "Hello";  // ✅ Variable assigned before JSX

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

2. Use Immediately-Invoked Function Expression (IIFE)

function MyComponent() {
  return (
    <div>
      {(() => {
        const message = "Hello";  // ✅ Variable in IIFE
        return <p>{message}</p>;
      })()}
    </div>
  );
}

3. Ternary Operator for Conditional Assignment

function Greeting({ isLoggedIn }) {
  return (
    <div>
      <p>{
        isLoggedIn 
          ? (name = getUserName(), `Welcome ${name}`)  // ✅ Comma operator
          : 'Please log in'
      }</p>
    </div>
  );
}

Common Use Cases

1. Dynamic Class Names

function Button({ isActive }) {
  const btnClass = isActive ? 'active' : 'inactive';  // ✅ Before return

  return <button className={btnClass}>Click</button>;
}

2. Mapping Arrays

function List({ items }) {
  return (
    <ul>
      {items.map(item => {
        const displayText = item.prefix + item.text;  // ✅ In map callback
        return <li key={item.id}>{displayText}</li>;
      })}
    </ul>
  );
}

3. Complex Calculations

function PriceDisplay({ price, taxRate }) {
  const total = price * (1 + taxRate);  // ✅ Before return

  return (
    <div>
      <p>Base: ${price}</p>
      <p>Total: ${total.toFixed(2)}</p>
    </div>
  );
}

Why Curly Braces Are Required

JSX gets transformed into JavaScript function calls:

<div>{value}</div> → React.createElement('div', null, value)

Without braces, content is treated as:

<div>value</div> → React.createElement('div', null, "value")

Key Rules to Remember

1. Direct assignments (=) are never allowed in JSX
2. Expressions must be wrapped in {}
3. Statements (if, for, etc.) must be outside JSX or wrapped in IIFE
4. Ternary operations (?:) are allowed in {}

Advanced Pattern: Render Props

function DataFetcher({ children }) {
  const [data, setData] = useState(null);

  // Fetch data here...

  return children(data);  // ✅ Variable passed via function
}

// Usage:
<DataFetcher>
  {data => data ? <Display data={data}/> : <Loading/>}
</DataFetcher>