JSX Syntax Rules - The Complete Guide

All the JSX rules you need to know! Learn how to write valid, clean JSX every time!

Introduction

JSX has rules! Let's learn them all so you never make a mistake writing JSX again!

What You Will Learn

  • All JSX syntax rules
  • Common mistakes and how to avoid them
  • JSX best practices

Prerequisites

Rule 1: Return a Single Root Element

You can only return one top-level element from a component!

// ❌ Wrong! Multiple elements!
function BadComponent() {
  return (
    <h1>Hello</h1>
    <p>World</p>
  );
}

// ✅ Right! Wrapped in a div!
function GoodComponent() {
  return (
    <div>
      <h1>Hello</h1>
      <p>World</p>
    </div>
  );
}

Rule 1a: Use React.Fragment (or <>...</>)

If you don't want an extra div, use a Fragment!

// ✅ Perfect! No extra DOM node!
function GoodComponent() {
  return (
    <>
      <h1>Hello</h1>
      <p>World</p>
    </>
  );
}

// Or explicit React.Fragment
function GoodComponent() {
  return (
    <React.Fragment>
      <h1>Hello</h1>
      <p>World</p>
    </React.Fragment>
  );
}

Fragments are especially useful for lists where you don't want wrapper elements!

Rule 2: Close All Elements

All elements must be closed, even self-closing ones!

// ❌ Wrong! Not closed!
<input type="text">
<br>
<img src="logo.png">

// ✅ Right! Closed properly!
<input type="text" />
<br />
<img src="logo.png" />

Rule 3: Use className Instead of class

class is a reserved keyword in JavaScript, so we use className!

// ❌ Wrong!
<div class="container"></div>

// ✅ Right!
<div className="container"></div>

Rule 4: Use CamelCase for Attributes

HTML attributes become camelCase in JSX!

| HTML Attribute | JSX Attribute | |----------------|---------------| | class | className | | for | htmlFor | | tabindex | tabIndex | | onclick | onClick | | onchange | onChange | | maxlength | maxLength |

// ❌ Wrong!
<label for="name">Name:</label>
<input tabindex="1" onclick="handleClick()" />

// ✅ Right!
<label htmlFor="name">Name:</label>
<input tabIndex="1" onClick={handleClick} />

Rule 5: Use Curly Braces for JavaScript Expressions

To use JavaScript in JSX, wrap it in {}!

const name = "React";

// ❌ Wrong! No curly braces!
<h1>Hello name</h1>

// ✅ Right!
<h1>Hello {name}</h1>

Any valid JavaScript expression works:

<h1>Hello {user.name}</h1>
<p>Total: {a + b}</p>
<div>Date: {new Date().toLocaleDateString()}</div>

Rule 6: Booleans, Null, and Undefined Are Ignored

These values won't render anything:

  • false
  • null
  • undefined
  • true (usually!)

This is useful for conditional rendering!

{isLoggedIn && <h1>Welcome!</h1>}
{isAdmin && <button>Delete</button>}

Rule 7: Inline Styles Use Objects

Inline styles are passed as camelCased objects, not strings!

// ❌ Wrong! String like HTML!
<div style="background-color: red; font-size: 20px;"></div>

// ✅ Right! Object with camelCase properties!
<div style={{ backgroundColor: 'red', fontSize: '20px' }}></div>

Notice the double curly braces: The outer {} for JS expression, inner {} for the object!

Rule 8: Comments in JSX

To write comments inside JSX, use {/* ... */}!

function MyComponent() {
  return (
    <div>
      {/* This is a comment in JSX! */}
      <h1>Hello</h1>
    </div>
  );
}

Rule 9: Multi-Line JSX Needs Parentheses

When your JSX spans multiple lines, wrap it in parentheses!

// ❌ Risky! Automatic semicolon insertion might mess it up!
function BadComponent() {
  return
    <div>
      <h1>Hello</h1>
    </div>;
}

// ✅ Perfect!
function GoodComponent() {
  return (
    <div>
      <h1>Hello</h1>
    </div>
  );
}

Rule 10: No If Statements Inside JSX (Use Ternary or &&!)

You can't put if statements directly inside JSX, but you can use ternary operators or &&!

// ❌ Wrong!
function BadComponent() {
  return (
    <div>
      {if (isLoggedIn) { <h1>Hi</h1> } else { <h1>Bye</h1> }} 
    </div>
  );
}

// ✅ Right - Ternary!
function GoodComponent() {
  return (
    <div>
      {isLoggedIn ? <h1>Hi</h1> : <h1>Bye</h1>}
    </div>
  );
}

// ✅ Right - && for one condition!
function GoodComponent() {
  return (
    <div>
      {isLoggedIn && <h1>Hi</h1>}
    </div>
  );
}

Summary of All JSX Rules (Cheat Sheet!)

  1. Return single root element (use <></> if needed)
  2. Close all elements (<br />, <img />)
  3. className not class
  4. CamelCase attributes (tabIndex, onClick, htmlFor)
  5. {} for JS expressions
  6. Booleans/null/undefined don't render
  7. Inline styles are camelCased objects
  8. {/* Comment */} for comments
  9. Multi-line JSX needs parentheses
  10. No if inside JSX - use ternary/&&

Common Mistakes & How to Fix Them

| Mistake | Fix | |---------|-----| | class= | className= | | tabindex= | tabIndex= | | onclick= | onClick= | | Forgot {} around expressions | Add {}! | | Multiple top-level elements | Wrap in <></> | | style="color: red" | style={{ color: 'red' }} |

Best Practices

  1. Prettier: Use Prettier to auto-format JSX!
  2. ESLint: Catches mistakes early!
  3. Meaningful class names: Not just div1, div2!
  4. Consistent indentation: Makes JSX readable!

Summary

You've learned all the JSX rules! Now you can write perfect JSX every time!

Related Articles

Previous Tutorial

← Introduction to JSX

Next Tutorial

Let's learn Components! → Components

← Back to Syllabus