How to Fix "JSX element must be wrapped in enclosing tag"

How to fix common React errors

Ferenc Almasi • 2022 July 25 • 📖 3 min read

The "Adjacent JSX elements must be wrapped in an enclosing tag" error happens in React, whenever you try to return more than one element from your React component.

// ❌ This will throw the above error
const App = () => {
    return (
        <h1>Why returning multiple elements from React is invalid.</h1>
        <h2>Common React errors</h2>
    )
}
Copied to clipboard!

To resolve the error, you either need to wrap root sibling elements into a parent element, or you need to use fragments.

// ✔️ Use only one root element
const App = () => {
    return (
        <div>
            <h1>Why returning multiple elements from React is invalid.</h1>
            <h2>Common React errors</h2>
        </div>
    )
}

// ✔️ Even better to use fragments
const App = () => {
    return (
        <React.Fragment>
            <h1>Why returning multiple elements from React is invalid.</h1>
            <h2>Common React errors</h2>
        </React.Fragment>
    )
}
Copied to clipboard!

The problem with using a div element as a wrapper is that you will end up with a bunch of extra DOM elements for no reason. This is why it is preferred to use the built-in React.Fragment element instead.

Using React.Fragment will prevent the error, but does not create an extra DOM element. This means you get to keep your markup clean. You may also come across React.Fragment in the following forms:

import React, { Fragment } from 'react'

// Using only <Fragment />
const App = () => {
    return (
        <Fragment>
            <h1>Why returning multiple elements from React is invalid.</h1>
            <h2>Common React errors</h2>
        </Fragment>
    )
}

// Using a shorthand syntax
const App = () => {
    return (
        <>
            <h1>Why returning multiple elements from React is invalid.</h1>
            <h2>Common React errors</h2>
        </>
    )
}
Copied to clipboard!

Whichever format you choose, make sure you keep it consistent across your codebase.


Why React Requires Adjacent Elements to be Wrapped?

Under the hood, React returns React.createElement function calls from your components. Whenever you try to return multiple sibling elements at the root of your component, you essentially create multiple return statements.

const App = () => {
    return React.createElement('h1')
    return React.createElement('h2')
}
Copied to clipboard!

Only one return value can be returned from functions, so returning multiple elements is invalid syntax. Subsequent return statements will be unreachable. This is the reason you must only return one root element from your React components.

You may also return an array of elements, where a fragment may not be applicable. However, this is only on edge cases.

Remove ads
Remove ads

📚 Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. ☕

Get access Support us
Remove ads Read more on
Remove ads
Remove ads
🎉 Thank you for subscribing to our newsletter. x