Adjacent JSX elements must be wrapped in an enclosing tag【React Native エラー】

man

困ってる人
何だこれ?

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


こんにちは、よろと申します。

今回は、SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…? というエラーが出た場合の解決方法という事で、

エラーの意味合いとしては、

JSX elementsはタグで囲む必要があるよという、エラー内容を読んでそのままの意味、

React Nativeでコンポーネントを作る場合は、親要素が一つじゃなきゃダメ。

例を挙げるとしたら、

例えばこんな感じだと、同じレベルの要素(親要素)が、中に2つ並んでしまうとダメ(エラーが出る)

解決方法としては、

これらを何か別の要素で囲んであげるだけでOK。

例えば、

これならOK。

もう少し見やすくシンプルに分かりやすく書くと、

と、これならOK。

エラーが出た時に注意する事としては、

同じレベルの階層にある要素が、どこかに混ざって無いか?などを確認してみるといいかも。

終わり。

プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール