Parse Error: Adjacent Jsx Elements Must Be Wrapped in an Enclosing Tag

Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag

If you have been working with JavaScript and JSX, you might have come across the error message “Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag”. This error occurs when you have multiple JSX elements that are not enclosed within a single parent element. In this blog post, we will explore different solutions to fix this error.

Solution 1: Wrap JSX elements in a div

The simplest solution to fix this error is to wrap the JSX elements in a

element. By enclosing the elements within a parent

, you ensure that there is only one root element.

{`
  Hello
  This is a paragraph.
`}

Solution 2: Use a Fragment

If you don’t want to introduce an extra

element, you can use a Fragment. Fragments allow you to group multiple JSX elements without adding an extra DOM element.

{`import React, { Fragment } from 'react';

const MyComponent = () => (
  
    Hello
    This is a paragraph.
  
);`}

Solution 3: Use an Array

Another way to fix this error is by using an array to wrap the JSX elements. You can use the array shorthand syntax [ ] to enclose the elements.

{`const MyComponent = () => [
  Hello,
  This is a paragraph.
];`}

Now that you have learned different solutions to fix the “Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag”, you can choose the one that best fits your needs. Remember to always wrap your JSX elements within a single parent element or use a Fragment or an array to group them together.

Happy coding!

Posted

September 9, 2023

React

J. Kolby

Tags:

React

Parse Error: Adjacent Jsx Elements Must Be Wrapped in an Enclosing Tag