React JSX Rules

What is JSX Rules in React?

JSX enforces a few strict rules: a component must return a single root element, every tag must be closed, attribute names are camelCased, and JavaScript inside markup must be an expression rather than a statement.

Why JSX Rules matters

Nearly every error a beginner hits in their first week is one of these four rules. Learning them explicitly turns a confusing red screen into a two-second fix.

JSX Rules example

function Profile() {
  const user = { name: 'Arjun', active: true };

  return (
    <>                                {/* 1. single root — fragment counts */}
      <img src="/avatar.png" alt="" /> {/* 2. self-closing tag */}
      <label htmlFor="n">Name</label>  {/* 3. camelCase prop */}
      <p id="n">{user.active ? 'Online' : 'Offline'}</p> {/* 4. expression */}
    </>
  );
}

How this works

The empty <> </> is a fragment: it satisfies the single-root rule without adding a wrapper div to the DOM. The ternary works inside braces because it is an expression that produces a value; an if statement would not.

Handling a condition that needs statements

function Status({ code }) {
  let message;                 // statements live ABOVE the return
  if (code === 200) message = 'OK';
  else if (code === 404) message = 'Not found';
  else message = 'Error';

  return <p>{message}</p>;     // only the expression goes in JSX
}

Key points to remember

• Return one root node — a real element, a fragment <>…</>, or an array with keys.
• Close every tag, including <br />, <img /> and <input />.
• Use camelCase for props: onClick, onChange, autoFocus, maxLength.
• Braces accept expressions only: ternaries, &&, function calls, template literals.
• Comments inside JSX are written as {/* like this */}.

Common mistakes with JSX Rules

• Trying to put an if/else or a for loop directly inside braces.
• Leaving <img> or <input> unclosed, which is legal HTML but a JSX syntax error.
• Returning adjacent JSX elements without a wrapper — "Adjacent JSX elements must be wrapped in an enclosing tag".