Using Multiple Root Elements in JSX

In React/JSX, you normally can’t return multiple root elements from a component because JSX must have a single parent element. However, there are several solutions to work around this limitation:

Solutions for Multiple Root Elements

1. Fragment (Recommended)

function MyComponent() {
  return (
    <>
      <div>First element</div>
      <div>Second element</div>
    </>
  );
}

• The empty tags <> </> are shorthand for <React.Fragment>
• Doesn’t create an extra DOM node

2. Explicit React.Fragment

import React from 'react';

function MyComponent() {
  return (
    <React.Fragment>
      <div>First element</div>
      <div>Second element</div>
    </React.Fragment>
  );
}

3. Array with Keys (For dynamic lists)

function MyComponent() {
  return [
    <div key="1">First element</div>,
    <div key="2">Second element</div>
  ];
}

• Note: Each element needs a unique key prop

4. Higher-Order Component

function WithWrapper({ children }) {
  return children;
}

function MyComponent() {
  return (
    <WithWrapper>
      <div>First element</div>
      <div>Second element</div>
    </WithWrapper>
  );
}

Why Fragments Are Better Than Div Wrappers

1. No extra DOM nodes – Fragments don’t appear in the DOM
2. Better for CSS – No unintended layout consequences
3. Semantic correctness – When wrapper elements would violate HTML structure rules
4. Performance – Slightly better as it avoids creating unnecessary elements

Common Use Cases

1. Table structures:

function TableData() {
  return (
    <table>
      <tr>
        <Columns />
      </tr>
    </table>
  );
}

function Columns() {
  return (
    <>
      <td>Column 1</td>
      <td>Column 2</td>
    </>
  );
}

2. List items:

function ItemList() {
  return (
    <ul>
      <Items />
    </ul>
  );
}

function Items() {
  return (
    <>
      <li>Item 1</li>
      <li>Item 2</li>
    </>
  );
}