Invalid JSX syntax – Adjacent JSX elements must be wrapped in an enclosing tag

The error “Adjacent JSX elements must be wrapped in an enclosing tag” occurs when you try to return multiple JSX elements from a React component without enclosing them in a single parent element. React requires that JSX elements be wrapped in a single parent tag when they are returned from a component.

Steps to Resolve “Adjacent JSX elements must be wrapped in an enclosing tag” Error:

1. Wrap JSX Elements in a Parent Element

You must ensure that all adjacent JSX elements are wrapped in a single parent element (such as a <div>, <section>, or any other container element).

For example:

// Incorrect: Multiple JSX elements are adjacent to each other
const MyComponent = () => {
  return (
    <h1>Hello World</h1>
    <p>Welcome to the React app!</p>
  );
};

To resolve the error, wrap the elements in a single parent element:

// Correct: JSX elements are wrapped in a parent div
const MyComponent = () => {
  return (
    <div>
      <h1>Hello World</h1>
      <p>Welcome to the React app!</p>
    </div>
  );
};

2. Use a React Fragment

If you don’t want to add an extra element like <div> just for wrapping, you can use React Fragments. React Fragments allow you to group a list of children without adding extra nodes to the DOM.

Example:

// Correct: JSX elements are wrapped in a React fragment
const MyComponent = () => {
  return (
    <>
      <h1>Hello World</h1>
      <p>Welcome to the React app!</p>
    </>
  );
};

<> and </> are shorthand for React.Fragment. If you need to add a key to the fragment (e.g., in a list), you can use:

<React.Fragment key="someKey">
  <h1>Hello World</h1>
  <p>Welcome to the React app!</p>
</React.Fragment>

3. Check for Return Statements in Functions

Make sure that the return statement in your component has a single parent element. For example, if you have a function returning multiple elements, ensure they are wrapped together.

// Incorrect:
function MyComponent() {
  return (
    <h1>Hello World</h1>
    <p>Welcome</p>
  );
}

// Correct:
function MyComponent() {
  return (
    <div>
      <h1>Hello World</h1>
      <p>Welcome</p>
    </div>
  );
}

4. Ensure Consistent Parentheses Usage

When returning JSX, ensure that you properly use parentheses for multi-line JSX elements. This will help you avoid syntax errors.

// Correct:
const MyComponent = () => {
  return (
    <div>
      <h1>Hello World</h1>
      <p>Welcome</p>
    </div>
  );
};

5. Avoid Nested Return Statements

If you have multiple conditional return statements, make sure each return is wrapped appropriately. For instance:

// Incorrect:
const MyComponent = () => {
  if (condition) {
    return <h1>Hello</h1>;
  }
  return <p>World</p>;
};

// Correct:
const MyComponent = () => {
  if (condition) {
    return (
      <div>
        <h1>Hello</h1>
      </div>
    );
  }
  return (
    <div>
      <p>World</p>
    </div>
  );
};

6. Ensure You’re Not Returning Multiple Top-Level Elements

If you are rendering multiple components or elements in the return statement, ensure that the return is wrapped in one parent element or a fragment.

Summary

To resolve the “Adjacent JSX elements must be wrapped in an enclosing tag” error:

1. Wrap multiple JSX elements in a single parent element (like a <div>).
2. Use React Fragments (<>...</>) to group elements without adding extra nodes to the DOM.
3. Ensure that the return statement in a function returns a single parent element.
4. Properly use parentheses around multi-line JSX elements.
5. Avoid nested return statements that return multiple elements without a wrapper.