Adjacent JSX elements must be wrapped in an enclosing tag

Adjacent JSX elements must be wrapped in an enclosing tag

Posted by Ervin Adams on July 15, 2022

Adjacent JSX elements must be wrapped in an enclosing tag

Adjacent JSX elements must be wrapped in an enclosing tag

Posted by Ervin Adams on July 15, 2022

If you get this error in React js "Adjacent JSX elements must be wrapped in an enclosing tag" happens if you have multiple elements being returned in a component. 

In order to solve the problem, just wrap all elements in a parent element.

Don't do this:

export default class App extends Component {

    render() {

        return (
           <h1>Header</h1>
           <p>content</p>
        )
    }
}

Do this:

export default class App extends Component {

    render() {

        return (
          <div>
             <h1>Header</h1>
             <p>content</p>
          </div>
        )
    }
}

or this:

export default class App extends Component {

    render() {

        return (
          <>
             <h1>Header</h1>
             <p>content</p>
          </>
        )
    }
}

Check to ensure that you have an opening and closing tag on the parent element.

Enjoy!