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.
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.
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:
// 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:
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.
If you need a wrapper for styling or semantic purposes, use a regular HTML element like a div:
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.
For dynamic lists or when you need multiple root elements, return an array with proper key props:
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
Ensure conditional rendering doesn't create multiple roots:
// 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.
Double-check that your component's return statement wraps all JSX in one root element:
// 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)
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.
Prop spreading could cause security issues
Prop spreading could cause security issues
Error: error:0308010C:digital envelope routines::unsupported
Error: error:0308010C:digital envelope routines::unsupported
React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render.
React Hook useEffect placed inside a condition
Hook can only be called inside the body of a function component
Hook can only be called inside the body of a function component
Rollup failed to resolve import during build
How to fix "Rollup failed to resolve import" in React