本記事では、Reactで「Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?」のエラーが表示された際の原因と対処法について解説しています。
Reactの学習におすすめ参考書
モダンJavaScriptの基本から始める React実践の教科書
| 著者 | 岡田 拓巳 |
|---|---|
| 発売日 | 2021/9/17 |
| ページ数 | 272ページ |
| Kindle版 | ○ |
| レビュー (Amazon) | (152件) |
先輩くん
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
綺麗なコードが書けるようになる！
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック
| 出版社 | オライリージャパン |
|---|---|
| 著者 | Dustin Boswell / Trevor Foucher |
| 発売日 | 2012/6/23 |
| ページ数 | 260ページ |
| レビュー (Amazon) | (620件) |
先輩くん
より良いコードを書きたい人におすすめの本だよ！
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです！
原因と対処法
まず始めにこのエラーが出る原因は、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>
);
}
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 
