[SOLVED] Adjacent JSX elements must be wrapped in an enclosing tag Error

If you are a beginner and you have just started to learn ReactJS, then chances are that you will face this error sooner or later. This is one error, that almost all the ReactJS developers get at least once. Don't worry, this is very easy to fix, and in this article, I will share with you guys multiple different ways to fix this error.

So let's start by understanding, what could be the possible reason for getting this error. When you try to use more than one root-level JSX element inside the return for a Functional component, or in the render method for a Class component, you will get this error.

For example,

function App() {

  	return (
			<div></div>
			<div></div>
  	);
}

export default App;

You will see the following error:

Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

And as a beginner, this can be confusing. So let's understand why you get this error and what is the solution for this.

Why do you get this error?

As the error message states, Adjacent JSX elements must be wrapped in an enclosing tag, which means that you cannot use sibling JSX elements directly inside the return. Inside the return you can only use a single JSX element, that acts as the root element, and inside it, you can create JSX elements in any order.

So the below code is fine,

function App() {
    return (
        <div>
            <h1>Some heading</h1>
            <p>Some paragraph...</p>
        </div>
    );
}

export default App;

but this is not,

function App() {
    return (
        <h1>Some heading</h1>
        <p>Some paragraph...</p>
    );
}

export default App;

So you should always create a single JSX element in the return, and then inside it define the complete JSX code. Commonly, developers use a <div> JSX element inside the return, and then in the <div> define the complete user interface using various JSX elements.

1. Use Single Root Element in JS

As I mentioned in the above section, to fix the error, all you have to do is use a single root element inside the return statement, yes, that's it.

So, if you use a parent <div> JSX element, and put everything else inside it, the error is fixed.

function App() {
    return (
        <div>
            <h1>Some heading</h1>
            <p>Some paragraph...</p>
        </div>
    );
}

export default App;

See how simple the solution is. Let's see another solution for this error.

2. Use React Fragment or <>...</>

You can also use React Fragment to enclose your entire JSX code inside it. Let's see an example,

function App() {
    return (
        <Fragment>
            <h1>Some heading</h1>
            <p>Some paragraph...</p>
        </Fragment>
    );
}

export default App;

To use Fragment, like in the example above, you will have to import it into your JS file by using import { Fragment } from 'react'

If you don't want to write so much code, you can also use the shorthand for Fragment in your JSX code like this,

function App() {
    return (
        <>
            <h1>Some heading</h1>
            <p>Some paragraph...</p>
        </>
    );
}

export default App;

For the above style where you use the <>...</>, you don't have to import anything extra in your code.

End Note

So now you know how to fix the Adjacent JSX elements must be wrapped in an enclosing tag error. Just remember that when you write JSX code, always enclose all the JSX elements inside one root JSX element.