本記事では、Reactで「Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?」のエラーが表示された際の原因と対処法について解説しています。
Reactの学習におすすめ書籍
モダンJavaScriptの基本から始める React実践の教科書
メリット
- JavaScriptの基礎から始めてReactの機能を一通り学べる
- 実務で必要となる知識を意識しながら学習を進められる
- 現場のシチュエーションベースのストーリーで技術解説
楽天ブックス
¥2,860 (2024/10/02 16:59時点 | 楽天市場調べ)
ポチップ
先輩くん
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!
全プログラマー必見!
変数名/関数名にもう悩まない!
変数名/関数名にもう悩まない!
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次
原因と対処法
まず始めにこのエラーが出る原因は、JSXで返す要素が複数ある場合です。ReactのルールとしてJSXで返す要素は1つの親要素にまとめてあげる必要があります。下記のコードを見てみましょう。
function App() {
return (
<div className="App">
<p>test</p>
</div>
<div>
<p>test</p>
</div>
);
}
一見問題ないように見えますが、よく見ると親要素のdivタグが2つあることが確認できます。これはJSXを返す要素が複数あるので同じようなエラーが起きてしまいます。
これをエラーが起きないよう解決するには、親要素を更にまとめる新しいdivタグなどを追加するかReact.Fragment/<></>を使用します。
// div ver
import React, { useState } from "react";
function App() {
return (
<div>
<div className="App">
<p>test</p>
</div>
<div>
<p>test</p>
</div>
</div>
);
}
// React.Fragment ver
import React, { useState } from "react";
function App() {
return (
<React.Fragment>
<div className="App">
<p>test</p>
</div>
<div>
<p>test</p>
</div>
</React.Fragment>
);
}
【React】Fragmentの使い方
本記事では、ReactのFragmentの使い方について解説しています。 【Fragmentの使い方】 Reactでは、returnでJSXを返す時に1つのまとまりで要素にまとめてあげる必要があ…