How to fix Adjacent JSX elements must be wrapped in an enclosing tag in React

The recommended solution is to wrap your elements in a React Fragment. Fragments let you group multiple elements without adding extra nodes to the DOM:

// Before (Error)
function MyComponent() {
  return (
    <h1>Title</h1>
    <p>Description</p>
  );
}

// After (Fixed with Fragment shorthand)
function MyComponent() {
  return (
    <>
      <h1>Title</h1>
      <p>Description</p>
    </>
  );
}

You can also use the explicit React.Fragment syntax:

function MyComponent() {
  return (
    <React.Fragment>
      <h1>Title</h1>
      <p>Description</p>
    </React.Fragment>
  );
}

Fragments are preferred because they don't add unnecessary DOM elements, keeping your HTML structure clean and avoiding potential CSS layout issues.

If you need a wrapper for styling or semantic purposes, use a regular HTML element like a div:

function MyComponent() {
  return (
    <div>
      <h1>Title</h1>
      <p>Description</p>
    </div>
  );
}

This approach adds an extra DOM node, which might affect:
- CSS Flexbox and Grid layouts (the wrapper becomes part of the layout)
- CSS selectors that depend on specific element relationships
- Accessibility tree structure

Only use a wrapper div when you actually need it for styling or semantic purposes. Otherwise, prefer Fragments.

For dynamic lists or when you need multiple root elements, return an array with proper key props:

function MyComponent() {
  return [
    <h1 key="title">Title</h1>,
    <p key="desc">Description</p>,
    <button key="action">Click me</button>
  ];
}

Important considerations:
- Each element must have a unique key prop
- This syntax is less common and harder to read than Fragments
- Fragments are generally preferred for static content
- Use arrays when dynamically generating elements from data

Ensure conditional rendering doesn't create multiple roots:

// Before (May cause issues)
function MyComponent({ showExtra }) {
  return (
    <h1>Title</h1>
    {showExtra && <p>Extra content</p>}
  );
}

// After (Fixed)
function MyComponent({ showExtra }) {
  return (
    <>
      <h1>Title</h1>
      {showExtra && <p>Extra content</p>}
    </>
  );
}

Even if the conditional content doesn't always render, the syntax must be valid with all paths wrapped in a single parent.

Double-check that your component's return statement wraps all JSX in one root element:

// Incorrect - multiple returns at same level
function Header() {
  return (
    <Logo />
    <Navigation />
  );
}

// Correct - single Fragment root
function Header() {
  return (
    <>
      <Logo />
      <Navigation />
    </>
  );
}

Common mistakes:
- Forgetting to add the wrapper after adding new elements
- Closing the wrapper too early, leaving elements outside
- Having multiple return statements that each return different roots (this is valid, but each return must have a single root)