🫥
React基礎[エラー]:Adjacent JSX elements must be wrapped in an enclosing tag
React初学者向け。
エラーをそのまま訳すと、隣接しているJSX要素は一つの要素で囲みなさいという意味。
現在のコードは以下のようになっています。
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
function App() {
return (
<h1>Hello World</h1>
<p>test</p>
)
}
export default App
App関数の中のreturnの中がJSX記法で書かれたコードとなっており、h1タグとpタグが一つのタグで囲まれてないため発生したエラーとなっています。
ReactのJSXの仕様として、JSXで書かれた内容は、一つのタグで囲まなければいけないようになっています。
解決方法は3つ
①divタグで囲む
以下のようにreturnの中をすべてdivタグで囲みます。
function App() {
const [count, setCount] = useState(0)
return (
<div>
<h1>Hello World</h1>
<p>test</p>
</div>
)
}
検証ツールで確認するとdivがエラーが消え、div要素が生成されています。
②Fragmentタグで囲む
1つ目の方法では不要にdiv要素が生成され、他のコードに影響が出てしまう場合があります。
要素を生成したくない場合は、下記のようにFragmentタグで囲む方法もあります。
import { Fragment } from 'react'
function App() {
return (
<Fragment>
<h1>Hello World</h1>
<p>test</p>
</Fragment>
)
}
export default App
コード上部でFragmentをimportします。そうするとFragment使えるようになるので
囲って検証ツールで確認すると
エラーは出ず、先ほどのようにdiv要素は生成されません。
③<></>で囲む
最もシンプルな方法として<></>で囲む方法があります。
先ほどはFragmentをimportしてタグを使用しましたが、そのような必要がなく、
下記のように囲むだけで解消します。
function App() {
return (
<>
<h1>Hello World</h1>
<p>test</p>
</>
)
}
export default App
Fragmentと同じようにエラーが解消され、余計な要素も生成されていません。
個人的には、余計な要素が作成されず、
一番シンプルな3つ目の方法を使用するのが良いかと思います。
Discussion