React Adjacent JSX Elements Must Be Wrapped — What It Means & How to Fix It

What Does This Error Mean?

This React error means your component is returning more than one top-level JSX element without wrapping them in a single parent. React components must return a single root element — returning two sibling elements side by side is not allowed. The simplest fix is to wrap both elements in a <div> or, to avoid adding a DOM node, use a React Fragment (<> </> or <React.Fragment>). This is one of the first errors beginners encounter in React.

Affected Models

React 17
React 18
React 19
Create React App
Next.js

Common Causes

The component's return statement has two or more top-level JSX elements not wrapped in a single parent
A JSX expression or function is returning multiple elements directly instead of wrapping them
Copy-pasting code from a non-component context (like HTML) without adding a wrapper element
Forgetting to add a fragment wrapper when refactoring and removing a parent element
Attempting to return a conditional pair of elements from a component without a fragment

How to Fix It

Identify the component throwing the error. The error message names the file and line number. Open the file and find the return statement that has two sibling top-level elements.

The error: 'Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment?' tells you exactly what to do.
Wrap the sibling elements in a React Fragment using the shorthand syntax: <> and </>. This groups elements without adding any HTML to the DOM.

Example: return (<><Header /><Main /></>); — the empty angle brackets are the Fragment shorthand introduced in React 16.2.
Alternatively, use the full Fragment syntax: <React.Fragment> and </React.Fragment>. Use the full syntax when you need to add a key prop to the fragment (such as inside a .map() call).

The shorthand <></> does not accept props. If you need key={item.id} on a fragment, use <React.Fragment key={item.id}>.
If you do not mind adding a DOM node, wrapping in a <div> is the quickest fix. Be aware this adds an extra HTML element to the page which can affect CSS styling.

Many developers prefer Fragments over div wrappers because they keep the HTML output clean and do not create unintended CSS specificity or flexbox/grid issues.
Check that every JSX expression that returns multiple elements uses a Fragment or single parent, not just the component's main return. This error can also occur inside .map() callbacks and conditional renders.

Example in map: array.map(item => <><li>{item.name}</li><li>{item.value}</li></>)

When to Call a Professional

This is a straightforward syntax rule in React — no external help is needed. The fix is a code change that takes under a minute once you understand the pattern. Use React Fragments to avoid adding unnecessary DOM nodes to your page.

Frequently Asked Questions

Why does React require a single root element?

React components are compiled to JavaScript function calls — React.createElement(type, props, ...children). A function can only return a single value in JavaScript. Returning two JSX elements is like trying to return two values from one function — it is not valid syntax. Fragments solve this by wrapping multiple elements in a single (invisible) container that satisfies the single-return requirement.

Does using a Fragment instead of a div affect performance?

Fragments are slightly more performant than div wrappers because they do not add a DOM node. Fewer DOM nodes means faster rendering, less memory use, and no CSS side effects from extra wrapper elements. The difference is imperceptible in most apps, but Fragments are considered best practice for cleaner output. In long lists with many items, using Fragments instead of divs can produce measurable DOM size reductions.

Can I return an array of elements instead of using a Fragment?

Yes — React allows returning an array of JSX elements from a component. However, each item in the array must have a unique key prop, which is cumbersome for non-list components. Fragments are cleaner and do not require keys (unless you use the full <React.Fragment key={...}> syntax in maps). Using arrays as return values is a valid but rarely used pattern outside of list rendering.