Fixing the 'Adjacent JSX elements must be wrapped in an enclosing tag' Error in React

The ProblemIt happens to everyone. You’re building a simple component—perhaps a header and a subtext—and you try to return them side-by-side. You hit save, but instead of your new UI appearing, a bright red error crashes your terminal or browser console:

Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

This is one of the first hurdles every React developer hits. It isn't a bug in your logic; it is a strict requirement of how JSX is processed behind the scenes.

Why This Error OccursJSX might look like HTML, but it is actually a shortcut for JavaScript. Tools like Babel or Vite transform every tag you write into React.createElement() calls. React needs to know exactly what the root of your component is.

Consider this invalid code snippet:

function MyComponent() {
  return (
    <h1>Hello World</h1>
    <p>This is a description.</p>
  );
}

The compiler attempts to turn that code into this:

function MyComponent() {
  return (
    React.createElement('h1', null, 'Hello World')
    React.createElement('p', null, 'This is a description.')
  );
}

In JavaScript, a function cannot return two values at once. It can only return one single object, string, or element. Because those two createElement calls are sitting next to each other without a parent, the JavaScript engine simply gives up.

The Debugging ProcessYour IDE is your best friend here. VS Code will usually highlight the second element with a red squiggly line the moment you type it. If you are hunting down the error in a large file, follow these steps:

• Check the return statement for multiple top-level elements.- Identify if you are missing a closing tag somewhere above the error.- Look at .map() functions where you might be returning two siblings without a wrapper.## Step-by-Step Solutions### 1. Wrapping with a Container ElementThe quickest fix is to wrap your elements in a standard HTML tag like a <div> or <section>.

function MyComponent() {
  return (
    <div className="container">
      <h1>Hello World</h1>
      <p>This is a description.</p>
    </div>
  );
}

When to use: Choose this if you need a physical element in the DOM to apply CSS Flexbox, Grid, or specific styling classes.

2. Using React FragmentsAdding extra <div> tags can lead to "div soup," which clutters the DOM and can break CSS layouts. React Fragments allow you to group elements without adding an extra node to the browser's HTML tree.

import { Fragment } from 'react';

function MyComponent() {
  return (
    <Fragment>
      <h1>Hello World</h1>
      <p>This is a description.</p>
    </Fragment>
  );
}

3. The Shorthand Syntax (Recommended)Modern React provides a much cleaner way to write Fragments. Use empty tags: <>...</>. This is the industry standard for 90% of cases.

function MyComponent() {
  return (
    <>
      <h1>Hello World</h1>
      <p>This is a description.</p>
    </>
  );
}

Pro tip: You cannot use this shorthand if you need to pass a key prop (for example, inside a loop). In that specific scenario, you must use the explicit <Fragment key={item.id}> syntax.

4. Returning an ArrayWhile less common, you can return an array of elements. This is useful when your UI structure is dynamic, but it requires a unique key for every item.

function MyComponent() {
  return [
    <h1 key="header">Hello World</h1>,
    <p key="desc">This is a description.</p>
  ];
}

Verification Steps- Check the Console: Ensure your terminal says "Compiled successfully."- Inspect the DOM: Open Chrome DevTools (F12). If you used a Fragment, the <h1> and <p> should appear as direct children of their parent without an intervening <div>.- Validate Layout: Ensure your CSS hasn't shifted. Adding a wrapper <div> can sometimes accidentally reset display: flex properties on the parent container.## Lessons Learned- JSX requires a single root node because it eventually becomes a single JavaScript function call.- Use Fragments (<>...</>) to keep your HTML output lean and avoid layout bugs.- Reserve Wrapper Tags (<div>) for when you actually need to style the group.- Even though JSX looks like HTML, it follows the strict structural rules of JavaScript.