Are you having trouble with the problem “adjacent JSX elements must be wrapped in an enclosing tag”? Don’t worry! In this article, we will give you some knowledge about the reason of this error and some solutions to fix it. Read on it now.

How does the problem “adjacent JSX elements must be wrapped in an enclosing tag” occur?

In the React library if you are using numerous HTML elements inside a render method, you will get the following error message:

Adjacent JSX elements must be wrapped in an enclosing tag

The render method can only accept a single HTML element, which is the cause of the issue. This means that if you use the render method with 2 or more HTML items consecutively, it won’t operate and will display this error.

How to solve this problem?

Solution 1: Embedding the entire HTML element inside a single div element

Embedding the entire HTML element inside a single div element is the simplest solution to fix this problem. Inside a div, everything counts as a single HTML element.

The syntax:

ReactDOM.render(
<div>
  // you can use more than one html 
  // element inside a single div element.
</div>,
  document.getElementById("root)
 );

Look at the following code to understand more about this method:

import React from 'react';
import ReactDOM from 'react-dom';  

ReactDOM.render(  
  <div>  
  <h1>Geeks For Geeks</h1>    

<p>Learn Programming </p>    
  
  </div>,  
  document.getElementById('root')
);

The h1> and p> tags are enclosed in a single div HTML element. Inside a div, everything counts as a single HTML element, so you receive the desired result without any errors.

Solution 2: Utilizing React.Fragment 

Utilizing React.Fragment also is a solution for this error. However, you mustn’t generate an extra DOM element. This means that you need to maintain a clean markup. React.Fragment also can be found in the some forms below:

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>
        </>
    )
}

Ensure to maintain consistency throughout your codebase regardless of the format you select.

Solution 3: Returning an array (only for React 16.0+)

React Components can now return arrays as of React version 16. It is not similar to the previous versions of React, which require you to wrap every sibling component in a parent component.

To put it another way, now you can do the following:

render() {   return [<p key={0}>foo</p>, <p key={1}>bar</p>]; }

This translates into:

return [React.createElement("p", {key: 0}, "foo"), 
React.createElement("p", {key: 1}, "bar")];

Keep in mind that the preceding returns an array. Since React version 16 and later, arrays are recognized as valid React Elements. However, arrays are invalid return objects in earlier versions of React.

The below also is not valid (you must return an array), so let’s take note:

render() {   return (<p>foo</p> <p>bar</p>); }

Conclusion

We believe you enjoy our article about “adjacent JSX elements must be wrapped in an enclosing tag”. What is the best solution for you? Let’s us know by leaving your comment below. If you have any questions or problems, let’s contact us. ITtutoria is willing to help you. Thank you for reading!

Read more

→ Solving “‘React’ must be in scope when using JSX react/react-in-jsx-scope” Error