【React】Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment …?

背景

Reactを勉強中をしたいなと思い、RailsのAPIをReactから叩けるようなアプリケーションの開発中の出来事。

Reactを使っていたらChromeのコンソールからエラーが出た。

開発環境

Ruby 2.5.1
Rails 6.0.0

エラー内容

Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

意味的には「隣接するJSX要素は終了タグで囲まれていなければいけないよ」とのこと。

解決方法

Reactのコンポーネントでreturnするコードを<div></div>で囲んだ。

参考サイト

[Sy] Reactで「Adjacent JSX elements must be wrapped in an enclosing tag」となる場合の対処

Reactでコンポーネントを作ろうとしたらうまく動いてないのでDeveloper Toolsを見てみると「Adjacent JSX elements must be wrapped in an enclosing tag」とエラーが。その場...

utano.jp