How to fix Adjacent JSX elements must be wrapped in an enclosing tag in React

ReactBEGINNERHIGHUpdated Dec 8, 2025· 156 views

This error occurs when a React component returns multiple sibling JSX elements without wrapping them in a parent element. React requires all components to return a single root element because JSX compiles to function calls that can only return one value.

Quick fix

Fixes Adjacent JSX elements must be wrapped in an enclosing tag

// Before (Error)
function MyComponent() {
  return (
    <h1>Title</h1>
    <p>Description</p>
  );
}

// After (Fixed with Fragment shorthand)
function MyComponent() {
  return (
    <>
      <h1>Title</h1>
      <p>Description</p>
    </>
  );
}

Use React Fragments to wrap multiple elements
Wrap elements in a parent div element
Return an array of elements with keys
Check conditional rendering logic

react — error

$// Before (Error)
function MyComponent() {
  return (
    <h1>Title</h1>
    <p>Description</p>
  );
}
// After (Fixed with Fragment shorthand)
function MyComponent() {
  return (
    <>
      <h1>Title</h1>
      <p>Description</p>
    </>
  );
}
Adjacent JSX elements must be wrapped in an enclosing tag

What this error means

The "JSX expressions must have one parent element" error (also shown as "Adjacent JSX elements must be wrapped in an enclosing tag") occurs when you attempt to return multiple sibling elements from a React component without wrapping them in a parent element. This is a fundamental requirement of JSX syntax and React's component model. The error happens because of how JSX is compiled to JavaScript. When you write JSX, it gets transformed into React.createElement() function calls. Just like regular JavaScript functions can only return a single value, React components must return a single element. Returning multiple elements at the same level is equivalent to having multiple return statements in a function, which is invalid syntax. This restriction exists because React needs a single root node to mount the component in the virtual DOM. Each component must represent one coherent piece of UI with a single entry point, even if that entry point contains many child elements.

Typical symptoms

Compilation error showing "JSX expressions must have one parent element"
Build process fails with "Adjacent JSX elements must be wrapped in an enclosing tag"
Component won't render and shows syntax error in development tools
TypeScript or ESLint reports multiple root element errors
Code editor displays red squiggly underlines on JSX elements
React development server crashes with JSX parsing errors
Production build fails during the JSX transformation step

Common causes

Returning multiple JSX elements at the same level without a wrapper element
Removing a parent div or container element that previously wrapped multiple children
Adding additional sibling elements to a component that already returns one element
Conditionally rendering elements that results in multiple roots when both paths execute
Copy-pasting JSX code that includes multiple top-level elements
Refactoring code and accidentally breaking the single-root requirement
Attempting to return an array of elements without proper array syntax
Misunderstanding that JSX components must return exactly one root element

How to fix "Adjacent JSX elements must be wrapped in an enclosing tag"

1Use React Fragments to wrap multiple elements

The recommended solution is to wrap your elements in a React Fragment. Fragments let you group multiple elements without adding extra nodes to the DOM:

jsx

// Before (Error)
function MyComponent() {
  return (
    <h1>Title</h1>
    <p>Description</p>
  );
}

// After (Fixed with Fragment shorthand)
function MyComponent() {
  return (
    <>
      <h1>Title</h1>
      <p>Description</p>
    </>
  );
}

You can also use the explicit React.Fragment syntax:

jsx

function MyComponent() {
  return (
    <React.Fragment>
      <h1>Title</h1>
      <p>Description</p>
    </React.Fragment>
  );
}

Fragments are preferred because they don't add unnecessary DOM elements, keeping your HTML structure clean and avoiding potential CSS layout issues.

2Wrap elements in a parent div element

If you need a wrapper for styling or semantic purposes, use a regular HTML element like a div:

jsx

function MyComponent() {
  return (
    <div>
      <h1>Title</h1>
      <p>Description</p>
    </div>
  );
}

This approach adds an extra DOM node, which might affect:
- CSS Flexbox and Grid layouts (the wrapper becomes part of the layout)
- CSS selectors that depend on specific element relationships
- Accessibility tree structure

Only use a wrapper div when you actually need it for styling or semantic purposes. Otherwise, prefer Fragments.

3Return an array of elements with keys

For dynamic lists or when you need multiple root elements, return an array with proper key props:

jsx

function MyComponent() {
  return [
    <h1 key="title">Title</h1>,
    <p key="desc">Description</p>,
    <button key="action">Click me</button>
  ];
}

Important considerations:
- Each element must have a unique key prop
- This syntax is less common and harder to read than Fragments
- Fragments are generally preferred for static content
- Use arrays when dynamically generating elements from data

4Check conditional rendering logic

Ensure conditional rendering doesn't create multiple roots:

jsx

// Before (May cause issues)
function MyComponent({ showExtra }) {
  return (
    <h1>Title</h1>
    {showExtra && <p>Extra content</p>}
  );
}

// After (Fixed)
function MyComponent({ showExtra }) {
  return (
    <>
      <h1>Title</h1>
      {showExtra && <p>Extra content</p>}
    </>
  );
}

Even if the conditional content doesn't always render, the syntax must be valid with all paths wrapped in a single parent.

5Verify component return statements

Double-check that your component's return statement wraps all JSX in one root element:

jsx

// Incorrect - multiple returns at same level
function Header() {
  return (
    <Logo />
    <Navigation />
  );
}

// Correct - single Fragment root
function Header() {
  return (
    <>
      <Logo />
      <Navigation />
    </>
  );
}

Common mistakes:
- Forgetting to add the wrapper after adding new elements
- Closing the wrapper too early, leaving elements outside
- Having multiple return statements that each return different roots (this is valid, but each return must have a single root)

Advanced notes

Fragment Keys: When using Fragments in lists, you must use the explicit <React.Fragment> syntax to add a key prop: <React.Fragment key={item.id}>...</React.Fragment>. The shorthand <>...</> syntax doesn't support attributes.

Performance: Fragments have zero performance overhead since they don't create actual DOM nodes. They only exist during JSX compilation and React's virtual DOM reconciliation.

TypeScript: TypeScript enforces the single-root requirement at compile time, often catching these errors before runtime. Configure your tsconfig.json with "jsx": "react" or "jsx": "react-jsx" for proper JSX type checking.

CSS Flexbox and Grid: Adding unnecessary wrapper divs can break CSS layouts that depend on parent-child relationships. For example, if you have a flexbox container expecting direct children, adding a wrapper div will change the flex layout. Fragments solve this by not adding to the DOM.

Higher-Order Components (HOCs): If you're creating HOCs that wrap multiple components, you can create a reusable wrapper component that enforces the single-root requirement while keeping your code DRY.

React 18+: Modern React versions provide better error messages that specifically mention using Fragments as a solution, making this error easier to diagnose and fix.

Frequently asked questions

What does "Adjacent JSX elements must be wrapped in an enclosing tag" mean?: The "JSX expressions must have one parent element" error (also shown as "Adjacent JSX elements must be wrapped in an enclosing tag") occurs when you attempt to return multiple sibling elements from a React component without wrapping them in a parent element. This is a fundamental requirement of JSX syntax and React's component model. The error happens because of how JSX is compiled to JavaScript.
How do I fix "Adjacent JSX elements must be wrapped in an enclosing tag"?: This error occurs when a React component returns multiple sibling JSX elements without wrapping them in a parent element. React requires all components to return a single root element because JSX compiles to function calls that can only return one value.
What causes "Adjacent JSX elements must be wrapped in an enclosing tag"?: Returning multiple JSX elements at the same level without a wrapper element Removing a parent div or container element that previously wrapped multiple children Adding additional sibling elements to a component that already returns one element
Is the "Adjacent JSX elements must be wrapped in an enclosing tag" error serious?: Yes. This is a high-severity error that usually blocks work until it is fixed, but the steps above resolve it.