ReactJSで「Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag」エラーが発生した時の対処法

「Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag」エラーの分かりやすい解説

このエラーは、ReactJSで複数のJSX要素をレンダリングしようとすると発生します。JSX要素は、HTMLと似た構文を持つJavaScriptの構文です。ReactJSでは、JSX要素をレンダリングするには、必ず親要素で囲む必要があります。

原因

このエラーが発生する主な原因は、以下の2つです。

1. 複数のJSX要素が直接隣り合っている
2. JSX要素がFragmentで囲まれていない

解決方法

このエラーを解決するには、以下の方法があります。

親要素で囲む

複数のJSX要素が直接隣り合っている場合は、divなどの親要素で囲みます。

const App = () => {
  return (
    <div>
      <h1>Hello World!</h1>
      <p>This is a paragraph.</p>
    </div>
  );
};

Fragmentで囲む

複数のJSX要素を直接隣り合わせにしたい場合は、React.Fragmentで囲みます。React.Fragmentは、実際のDOM要素を生成せず、JSX要素をグループ化する役割を果たします。

const App = () => {
  return (
    <>
      <h1>Hello World!</h1>
      <p>This is a paragraph.</p>
    </>
  );
};

その他の解決方法

上記の2つの方法以外にも、以下の方法でエラーを解決することができます。

• JSX要素を配列で囲む
• React.createElementを使用してJSX要素を作成する

補足

• このエラーは、ReactJSのバージョン16以降で発生します。
• React.Fragmentは、ReactJSのバージョン16で導入されました。

エラー発生例

const App = () => {
  return (
    <h1>Hello World!</h1>
    <p>This is a paragraph.</p>
  );
};

解決例1：親要素で囲む

const App = () => {
  return (
    <div>
      <h1>Hello World!</h1>
      <p>This is a paragraph.</p>
    </div>
  );
};

const App = () => {
  return (
    <>
      <h1>Hello World!</h1>
      <p>This is a paragraph.</p>
    </>
  );
};

const App = () => {
  return ([
    <h1>Hello World!</h1>,
    <p>This is a paragraph.</p>,
  ]);
};

const App = () => {
  return (
    React.createElement('div', null, [
      React.createElement('h1', null, 'Hello World!'),
      React.createElement('p', null, 'This is a paragraph.'),
    ])
  );
};

これらのコードを実行することで、エラーの発生と解決を確認することができます。

「Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag」エラーのその他の解決方法

条件分岐を使用してJSX要素を表示する

const App = () => {
  const showHeading = true;

  return (
    <div>
      {showHeading && <h1>Hello World!</h1>}
      <p>This is a paragraph.</p>
    </div>
  );
};

React.memoを使用してJSX要素をキャッシュする

const Heading = React.memo(() => {
  return <h1>Hello World!</h1>;
});

const App = () => {
  return (
    <div>
      <Heading />
      <p>This is a paragraph.</p>
    </div>
  );
};

React.Suspenseを使用してJSX要素の読み込みを遅延させる

const Heading = React.lazy(() => import('./Heading'));

const App = () => {
  return (
    <div>
      <React.Suspense fallback={<div>Loading...</div>}>
        <Heading />
      </React.Suspense>
      <p>This is a paragraph.</p>
    </div>
  );
};