React: Adjacent JSX elements must be wrapped in an enclosing tag

by

This common React error occurs when you try to render two top-level tags from your component. JSX can only handle rendering one top-level element per component. Fix this by either wrapping your components in JSX fragments (<>/</>) or an actual tag, such as a <div>.

JSX is a pretty revolutionary technology when it comes to developing single page web-apps (SPAs). It removes the need to have your HTML separate from your JavaScript, which can lead to one getting out of sync with the other during development.

Unlike HTML, however, JSX has certain rules that might seem counterintuitive for new React developers. One of those is that each component must render one and only one top-level component per component.

Let’s take a look at an example.

Problem: you returned two top-level components from your component

Below is an example of a component that displays user information. It was taken from our React routing tutorial, so if you want to learn more about routing, you should check it out.

import { useQuery } from "urql";

const USERS = `
    query {
        getRoom {
            users {
                name
            }
        }
    }
`;

export default function MessagesPage() {
    const [{data, fetching}] = useQuery({query: USERS});

    if (fetching) {
        return <h1>Loading...</h1>;
    } else {
        return (
            <h1>{data?.getRoom.users.length} Users Online</h1>
            <ul>
                {data?.getRoom.users.map((user, index) => (
                    <li key={index}>{user.name}</li>
                ))}
            </ul>
        );
    }
}
JavaScript

As you can see above, we are simply displaying some data fetched from a GraphQL query. But, the problem is right here:

} else {
        return (
            <h1>{data?.getRoom.users.length} Users Online</h1>
            <ul>
                {data?.getRoom.users.map((user, index) => (
                    <li key={index}>{user.name}</li>
                ))}
            </ul>
        );
    }
JavaScript

We’re returning an <h1> and a <ul> at the same time. This won’t even compile; instead, you’ll get the error below:

ERROR in [eslint]
src/UsersPage.js
  Line 21:12:  Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (21:12)

webpack compiled with 2 errors

Solution 1: use a JSX fragment

To fix this, we have to wrap these components in something so that only one component is rendered. Luckily, JSX comes with a “fragment” tag to handle this exact situation:

        return (
            <>
                <h1>{data?.getRoom.users.length} Users Online</h1>
                <ul>
                    {data?.getRoom.users.map((user, index) => (
                        <li key={index}>{user.name}</li>
                    ))}
                </ul>
            </>
        );
JavaScript

It might look a little funny, but the JSX fragment tag is just an empty set of <>s for the opening, and a </> to close it.

Solution 2: use a tag

You can also use an actual tag, such as a <div> to wrap the components returned by your component:

        return (
            <div id="users">
                <h1>{data?.getRoom.users.length} Users Online</h1>
                <ul>
                    {data?.getRoom.users.map((user, index) => (
                        <li key={index}>{user.name}</li>
                    ))}
                </ul>
            </div>
        );
JavaScript

This is useful, for example, if you have style rules you want to apply to it and need to assign it a class or an id.

Conclusion

JSX requires you to return only one top level component from your components. It makes sense if you think about it, because components are, well, components. They can be composed of other components, but they can’t themselves be more than one component.