Why React Components Must Return One Parent Element

React components must return one parent element because JSX compiles to plain JavaScript objects, and a function can return only one value. Two sibling tags would become two objects, with no way to hand back both at once. The error message is a hint that the rule comes from JavaScript, not from a preference.

App.jsx

function Profile() {
  return (
    <div>
      <h1>Maya</h1>
      <p>Developer</p>
    </div>
  );
}

The two inner tags are grouped under one div, so the component returns a single tree. Remove the div and the build fails with an error about adjacent JSX elements.

JSX compiles to objects

Each JSX tag becomes a JavaScript object that describes the element type and its props. The object for the heading is separate from the object for the paragraph.

A return statement can only hand back one of those objects. JSX requires a single root so the whole tree has one entry point for React to start from. This is also why the compiler catches two sibling tags at build time instead of waiting for the browser.

Consider the two tags as two separate objects. Wrapping them in one parent makes a single outer object that contains the rest, and that outer object is what the function returns. Knowing the reason makes the rule feel less arbitrary: it is the same constraint every JavaScript function already has.

A function returns one value

Under the hood, a component is just a function. JavaScript has no syntax for returning two values at once, so a function that appears to return two elements really returns only the first meaningful value.

JSX enforces the same rule at the markup level. An expression evaluates to one value, and that value becomes the root of the rendered tree. You can see the same limit in plain JavaScript: a function with two return statements runs only one of them, and the second is never reached.

Fragments lift the limit

Fragments group several elements into one return value without adding a wrapper to the page. The empty tag is the shorthand.

App.jsx

function Profile() {
  return (
    <>
      <h1>Maya</h1>
      <p>Developer</p>
    </>
  );
}

The fragment satisfies the single parent rule while keeping the DOM free of an extra div. The empty tag is not a real element, so the children stay siblings in the DOM while still counting as one root in the code.

The guide on fragments in React covers when to use the empty tag and when you need the full import. For the basics behind JSX itself, see the guide on what JSX is.