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

While developing my Android APP with React Native, I was getting this error frequently.

Solution:

When we write any condition in React Native code, each and every block must have code inside a <DIV> like below.

Sample Code:

{tenants.length == 0 ? (<View><Text style={styles.heading}>You have no Tenants</Text>

      <Button

        title="Add Tenant"

        style={styles.buttonStyleApprove}

        onPress={() => navigationService.navigate('AddTenant')}

        /></View>) : <View><Text style={styles.heading}>You have {tenants.length} Tenants</Text></View>

}

Error Logs:

 ERROR [Error: TransformError SyntaxError: C:\XELOXO\GIT\Property\APP\HousePerSqft\xeloxo-home-mobile\App\Screens\PropertyTab\index.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (53:6)