JSX Gotchas Beginners Face

😕 Introduction: JSX Isn’t Just HTML

If you're new to React, JSX can look deceptively familiar. It resembles HTML, but it has its own quirks that often trip up beginners. Understanding these subtle differences early can save you a ton of debugging headaches! 🧠

🚫 Gotcha #1: Using HTML Attributes Instead of JSX

JSX doesn't use all the same attribute names as HTML. Here are some common mistakes:

// ❌ Incorrect
<div class="box">Hello</div>

// ✅ Correct
<div className="box">Hello</div>

• class becomes className
• for becomes htmlFor
• Event handlers use camelCase: onclick → onClick

🔀 Gotcha #2: Returning Multiple Elements Without a Wrapper

JSX must return only one top-level element. Forgetting this often leads to syntax errors.

// ❌ This will throw an error
return (
  <h1>Title</h1>
  <p>Subtitle</p>
);

// ✅ Use a div or Fragment
return (
  <>
    <h1>Title</h1>
    <p>Subtitle</p>
  </>
);

🎯 Gotcha #3: Self-Closing Tags Matter

Unlike HTML, JSX is XML-like—every tag must be properly closed.

// ❌ Incorrect
<img src="logo.png">

// ✅ Correct
<img src="logo.png" />

Other common self-closing tags include input, br, and hr.

🧠 Gotcha #4: Confusing Expressions with Statements

JSX only allows expressions, not statements like if or for.

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

// ✅ Use ternary or logical operators
{loggedIn ? <p>Welcome</p> : <p>Please log in</p>}

🔁 Gotcha #5: Forgetting Keys in Lists

When using .map() to render lists, you must include a unique key prop. Missing it may not break the UI, but it'll trigger warnings and cause render bugs.

{items.map((item, index) => (
  <li key={index}>{item}</li>
))}

Prefer stable, unique IDs over indexes when possible.

📦 Gotcha #6: Mismatched Braces and Tags

It’s easy to forget closing tags or mismatched braces when mixing JavaScript and JSX.

// ❌ Missing closing tag
return <div>Hello

// ✅ Correct
return <div>Hello</div>

💬 Gotcha #7: Commenting in JSX

Standard // or /* */ won’t work inside JSX return blocks. You need curly braces.

// ❌ Invalid
<div>
  /* This is a comment */
</div>

// ✅ Valid
<div>
  {/* This is a comment */}
</div>

🎨 Gotcha #8: Styling Using Inline Objects

In JSX, inline styles must be objects, not strings. Also, properties use camelCase:

// ✅ Correct
<div style={{ backgroundColor: "blue", fontSize: "16px" }}>
  Styled Box
</div>

Double curly braces? Yes—one set for JSX, one for the JS object.

🔍 Gotcha #9: Rendering “Falsy” Values

Expressions like false, null, or undefined won't show up, but 0 and empty strings "" will!

// This will render a 0 on screen
<div>Value: {0}</div>

If you want to hide zero, add a check before rendering.

✅ Gotcha #10: Mixing Up Function Components and Hooks

Hooks like useState and useEffect only work in function components. Don’t use them in regular JS functions or inside conditions.

// ❌ Don't do this
if (true) {
  useState(); // Invalid
}

// ✅ Hooks must be top-level
function MyComponent() {
  const [count, setCount] = useState(0);
}

📌 Conclusion: Learn the Quirks Early

JSX is super powerful once you understand how it works under the hood. But it has some unusual rules that can frustrate new developers. These “gotchas” are totally normal to face, so don’t be discouraged! 💪

Keep practicing, follow the rules, and soon JSX will feel as natural as writing HTML—just way smarter. 😉