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

困ってる人

何だこれ？

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でコンポーネントを作る場合は、親要素が一つじゃなきゃダメ。

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

エラーの例を挙げるとしたら、

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (

    <View>
        <View>
            <View>
                <Text>テキスト</Text>
            </View>
        </View>
    </View>

    <View>
        <View>
            <Text>テキスト</Text>
            <Text>テキスト</Text>
        </View>
    </View>

  );
}

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

解決方法としては、

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

例えば、

↓

// React Native(親要素を１つだけにしてエラーをなくす)

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (

    <View> // これ１つで囲めばOK(これが親要素になる)

    	<View> // 中身はいくつ同じレベルの要素で並んでも大丈夫
	        <View>
	            <View>
	                <Text>テキスト</Text>
	            </View>
	        </View>
	    </View>

	    <View>
	        <View>
	            <Text>テキスト</Text>
	            <Text>テキスト</Text>
	        </View>
	    </View>

    </View>

  );
}

これならOK。

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

return ( // エラーが出るパターン
	<View></View> // 同じレベルの要素がここに２つある
	<View></View> // 同じレベルの要素がここに２つある
)

↓

return ( // OKなパターン
	<View> // これが親要素になり、同じレベルの要素は他にない
		<View></View> // 中の要素は１つじゃなくてもOK
		<View></View> // 中の要素は１つじゃなくてもOK
	</View>
)

と、これならOK。

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

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

終わり。