JSX Errors: Unexpected Token, Invalid Children, and Other Fixes

JSX errors are terse but consistent. Two of the most common, unexpected token and invalid children, both come from writing HTML habits into JSX, and each has a quick fix. Each message points at one rule, and most messages also name the offending line.

Unexpected token: adjacent elements

A component can return one parent element. Two sibling tags produce a compile error about adjacent JSX elements, which is the single most common JSX error for people coming from HTML.

App.jsx

function Post() {
  return (
    <h1>Title</h1>
    <p>Body</p>
  );
}

The error points at the first tag after the return. Wrap the siblings in one parent, or in a fragment that adds no wrapper to the page:

App.jsx

function Post() {
  return (
    <>
      <h1>Title</h1>
      <p>Body</p>
    </>
  );
}

The component now returns a single tree, and the error is gone. The fix is the same either way: give the return statement a single root. The guide on fragments in React covers the empty tag in detail.

Invalid children: rendering an object

Rendering a plain object where text belongs throws "Objects are not valid as a React child."

App.jsx

function User({ user }) {
  return <h1>{user}</h1>;
}

The braces try to render the whole user object, and React does not know how to display it. Read a property instead:

App.jsx

function User({ user }) {
  return <h1>{user.name}</h1>;
}

The heading now shows the name. A value that is null or undefined renders nothing instead, which is why an empty result often shows no text rather than an error. Arrays of objects fail the same way, so map them into JSX instead of rendering the array.

Common JSX errors at a glance

The key warning is not a compile error, but it signals a real bug, so treat it as an error anyway. The guide on rendering lists with map explains stable keys.

What to learn next

When in doubt, read the browser console, because React prints the line and often the exact fix. Most of the errors above reduce to a single rule: wrap siblings, read properties, close tags, and key your lists.