JSX Rules and Gotchas

Written by Swapnil RajaPublished 29 Aug 2026

Nearly every JSX error message is one of five mistakes. Recognising them by their error text saves more time than memorising the rules.

Returning nothing by accident

This is the most confusing one, because there is no error - the component simply renders nothing. It happens when a return is followed by a line break before the JSX.

The semicolon that eats your UI

jsx

function Broken() {
  // JavaScript inserts a semicolon after return, so this returns undefined.
  return
  ;<h3>You will never see this</h3>
}

function Fixed() {
  // Opening a bracket on the same line as return avoids it entirely.
  return (
    <h3>This one renders</h3>
  )
}

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
  <div>
    <Broken />
    <Fixed />
  </div>
)

PreviousExpressions in JSX NextComposing Components

Reach for the value you meant

jsx

function Fixed() {
  const user = { name: "Ada", visits: 3 }

  return (
    <div>
      {/* <p>{user}</p> would throw. Pick a field: */}
      <p>{user.name}</p>
      {/* Or stringify it deliberately, useful while debugging: */}
      <pre>{JSON.stringify(user, null, 2)}</pre>
    </div>
  )
}

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<Fixed />)

JSX Rules and Gotchas

Returning nothing by accident

Rendering an object

The rest of the list

Reading the error