Adjacent JSX elements must be wrapped in an enclosing tag

avatar

Borislav Hadzhiev

Last updated: Apr 4, 2022

banner

Photo from Unsplash

Adjacent JSX elements must be wrapped in an enclosing tag #

The React.js error "Adjacent JSX elements must be wrapped in an enclosing tag" occurs when a component returns multiple elements. To solve the error, wrap the elements in a parent div element or use a fragment, e.g. <><h1>Hello</h1><h1>World</h1></>.

adjacent jsx elements must be wrapped in enclosing tag

Here is an example of how the error occurs.

App.js
export default function App() { // ⛔️ Adjacent JSX elements must be wrapped in an // enclosing tag. Did you want a JSX fragment <>...</>? return ( <h1>Hello</h1> <h1>World</h1> ); }

The issue in the example above is that the App component returns multiple elements.

A component cannot return multiple elements, just like a function can't return multiple values (unless they're wrapped in an array, which is a single value).

One way to solve the error is to use a react fragment.

App.js
export default function App() { return ( <> <h1>Hello</h1> <h1>World</h1> </> ); }

Fragments are used when we need to group a list of children without adding extra nodes to the DOM.

You might also see the more verbose syntax of fragments being used.

App.js
import React from 'react'; export default function App() { return ( <React.Fragment> <h1>Hello</h1> <h1>World</h1> </React.Fragment> ); }

The two examples above achieve the same result - they group the list of children elements without adding extra nodes to the DOM.

An alternative solution is to wrap your child elements in another DOM element, e.g. a div.

App.js
export default function App() { return ( <div> <h1>Hello</h1> <h1>World</h1> </div> ); }

This solves the error because instead of returning multiple elements, we now return a single div element that contains multiple children.

The cause of the "Adjacent JSX elements must be wrapped in an enclosing tag" error is that it's invalid syntax to return multiple values from a function.

React components are just functions, so when we return multiple elements at the same level, we are effectively using multiple return statements at the same level of a function.

App.js
function render() { return React.createElement('h1', null, 'Hello'); return React.createElement('h1', null, 'World'); }

The second return statement is unreachable and this is invalid syntax.

On the other hand, when we wrap the elements with a fragment or another element, the function only returns a single value, which solves the error.

An alternative approach that you might see is to group the elements into an array.

App.js
export default function App() { return [<h1 key={0}>Hello</h1>, <h1 key={1}>World</h1>]; }

The array is a single value, so the error is resolved, however we are required to pass a unique key prop to each array element.

This is unnecessary and should be avoided as the fragment syntax is much more readable and intuitive.

App.js
export default function App() { return ( <> <h1>Hello</h1> <h1>World</h1> </> ); }

Conclusion #

The React.js error "Adjacent JSX elements must be wrapped in an enclosing tag" occurs when a component returns multiple elements. To solve the error, wrap the elements in a parent div element or use a fragment, e.g. <><h1>Hello</h1><h1>World</h1></>.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.