Adjacent JSX elements must be wrapped in an enclosing tag

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. To solve this error,  we should wrap the multiple elements in a parent div element or wrap elements using a react fragment.

Below example code throws the error.

// This will throw the above error
export default function App() {
  return (
    <P>First Element</P>
    <P>Second Element</P>
  );
}

In the above example, the issue is coming from the return statement of the component. Here we return two <p> tags from the App component. But react can only return one element from a component.

To resolve this error, we need to wrap all root sibling elements into a single element. For this, we have two methods.

  • Wrap all elements in React Fragment
  • Wrap all elements in a parent div

Let us discuss all these in detail.

Wrap all elements in React Fragment

We can wrap all elements in react fragment as given below example.

import React from 'react';

export default function App() {
  return (
  	<React.Fragment>
    	<P>First Element</P>
    	<P>Second Element</P>
    </React.Fragment>
  );
}

Fragments are used when we need to group a list of elements without adding extra nodes to the DOM. There is a new, shorter syntax we can use for declaring fragments. It looks like an empty tag as given below.

import React from 'react';

export default function App() {
  return (
  	<>
    	<P>First Element</P>
    	<P>Second Element</P>
    </>
  );
}

 

Wrap all elements in a parent div

We can wrap all the root sibling elements in a parent element like div.

export default function App() {
  return (
  	<div>
    	<P>First Element</P>
    	<P>Second Element</P>
    </div>
  );
}

The disadvantage of using a div element as a wrapper is that it will end up with an extra DOM element for no reason. This can cause the layout to break when working with the CSS Flexbox and Grid. This may also lead to invalid HTML for elements that must follow a specific structure like ul > li and table>tr>td. That is why we prefer to use the built-in React.Fragment element instead. React fragments serve as a cleaner alternative to using unnecessary divs in our code.

Why adjacent elements to be wrapped into a single element?

Under the hood, React components are just functions that return React.createElement function calls from our components. So when we return multiple elements at the same level, it is similar to multiple return statements at the same level of a function as given below.

export default function App() {
    return React.createElement('p', null, 'First Element');
    return React.createElement('p', null, 'Second Element');
}

In the above code, the second return statement is unreachable and it is an invalid syntax. This is the reason we can only return one root element from your React components.

Conclusion

To solve the "Adjacent JSX elements must be wrapped in an enclosing tag" error, wrap all return elements of a component using a React Fragment or in a parent div.

Related Blogs

Can't Perform a React State Update on an Unmounted Component

Can't Perform a React State Update on an Unmounted Component

React Warning “Can't perform a react state update on an unmounted component” is caused when we try to update the state after the component was unmounted. Explains how to fix it.

Each child in a list should have a unique key prop

Each child in a list should have a unique key prop

Solve Warning: Each child in a list should have a unique ”key" prop in React by setting the id property as a unique key or by auto-assigning unique keys.

React Hook is Called Conditionally

React Hook is Called Conditionally

Error: "React Hook is called conditionally. React Hooks must be called in the exact same order in every component render" occurs when hooks are invoked conditionally or after a return of a value.

Too many re-renders. React limits the number of renders to prevent an infinite loop

Too many re-renders. React limits the number of renders to prevent an infinite loop

The React error "Too many re-renders. React limits the number of renders to prevent an infinite loop" happens when you have reached an infinite render loop.

The tag is unrecognized in this browser

Warning: The tag is unrecognized in this browser

Warning "The tag is unrecognized in this browser" occurs when the tag doesn't exist in the browser or when we render a component starting with a lowercase letter.

The style prop expects a mapping from style properties to values, not a string

The style prop expects a mapping from style properties to values, not a string

"The style prop expects a mapping from style properties to values, not a string" React error occurs when we pass a CSS string to the style attribute.

Pass event and parameter onClick in React

How to pass event and parameter onClick in React

We set the inline arrow function (event) => clickHandler(event, "Hello World!") as props to the onClick event handler in the button. The arrow function takes the event as an argument and calls the clickHandler function.

Create a Back button with React Router

Create a Back button with React Router

To create a back button with React Router use useNavigate() hook. Call navigate function eg. navigate(-1); inside the onClick function of the back button.

Call multiple functions onClick in React

Call multiple functions onClick in React

To call multiple functions onClick in React, pass an event handler function into the onClick prop of the element that can call as many other functions as necessary.