【React】Adjacent JSX elements must be wrapped in an enclosing tag エラーの解決方法

ReactでコンポーネントをJSXで書いていると、次のエラーに遭遇することがあります。

Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

自分はRails APIをReactから叩くアプリケーションを開発しているときに初めてこのエラーに遭遇しました。原因と解決方法を整理します。

エラーの原因

Reactのコンポーネントは、returnで返すJSXのルート要素は必ず1つでなければならないというルールがあります。

たとえば、次のコードはエラーになります。

function MyComponent() {
  return (
    <h1>タイトル</h1>
    <p>本文</p>
  );
}

<h1> と <p> という2つの要素が並列に並んでいるため、ルート要素が2つ存在してしまいます。これがエラーの原因です。

解決方法1: divで囲む

最もシンプルな解決方法は、複数の要素を <div> で囲んでルート要素を1つにすることです。

function MyComponent() {
  return (
    <div>
      <h1>タイトル</h1>
      <p>本文</p>
    </div>
  );
}

解決方法2: JSXフラグメントを使う

<div> で囲む方法はシンプルですが、HTMLに不要な <div> が増えてしまうという問題があります。レイアウトへの影響を避けたい場合は、JSXフラグメント（<>...</>）を使うのがおすすめです。

function MyComponent() {
  return (
    <>
      <h1>タイトル</h1>
      <p>本文</p>
    </>
  );
}

フラグメントはDOM上には何も出力されないため、HTMLの構造をきれいに保てます。エラーメッセージ自体が Did you want a JSX fragment <>...</>? と提案していますね。

まとめ

基本的にはフラグメントを使う方法が現代的な書き方です。<div> を使う必要がある場合（スタイルを当てたいなど）以外は、フラグメントを選ぶとよいです。