本記事では、Reactで「Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?」のエラーが表示された際の原因と対処法について解説しています。
Reactの学習におすすめ書籍
モダンJavaScriptの基本から始める React実践の教科書
![](https://web-engineer-wiki.com/wp-content/uploads/2023/04/react.jpg)
メリット
- JavaScriptの基礎から始めてReactの機能を一通り学べる
- 実務で必要となる知識を意識しながら学習を進められる
- 現場のシチュエーションベースのストーリーで技術解説
楽天ブックス
¥2,860 (2024/07/24 06:46時点 | 楽天市場調べ)
![](https://web-engineer-wiki.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/woman-icon.jpeg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/woman-icon.jpeg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/woman-icon.jpeg)
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!
全プログラマー必見!
変数名/関数名にもう悩まない!
変数名/関数名にもう悩まない!
リーダブルコード
![](https://web-engineer-wiki.com/wp-content/uploads/2023/07/code-write.jpeg)
![](https://web-engineer-wiki.com/wp-content/uploads/2023/07/code-write.jpeg)
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
![](https://web-engineer-wiki.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
![](https://web-engineer-wiki.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
目次
原因と対処法
まず始めにこのエラーが出る原因は、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>
);
}
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)
【React】Fragmentの使い方
本記事では、ReactのFragmentの使い方について解説しています。 【Fragmentの使い方】 Reactでは、returnでJSXを返す時に1つのまとまりで要素にまとめてあげる必要があ…