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.

Looking to improve your skills? Check out our interactive course to master React from start to finish.
Master React

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.

Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access exclusive interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Remove ads to learn without distractions
Become a Pro

Recommended