Conditional rendering not working React Native IOS App - react-native

Question

I am a developing an Iphone App using React Native. I want to display table using DataTable. For a User, they have specific devices assigned. I used conditional rendering and getting the table with assigned devices for a user correctly, but when the user has no specific devices I want a message to be displayed as 'No Devices to display'. Below is the code,
ManageDevice.js:
import React, {useEffect} from 'react';
import {View,Text,StyleSheet,ScrollView} from 'react-native';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import HeaderButton from '../../components/UI/HeaderButton';
import {useDispatch, useSelector} from "react-redux";
import {DataTable, TextInput} from 'react-native-paper';
import AsyncStorage from '#react-native-community/async-storage';
import * as authActions from "../../store/actions/auth";
const ManageDevice = props =>{
const dispatch = useDispatch();
const devices = useSelector(state => state?.auth?.availableDevice);
useEffect(() => {
const onScreenLoad = async () => {
const useridfordevices = await
AsyncStorage.getItem("userDatauserid");
const obj = JSON.parse(useridfordevices);
const {userid} = obj;
var userid1 = userid[0];
await dispatch(authActions.getDeviceInfo(userid1))
};
onScreenLoad();
}, [dispatch]);
if (devices)
{
return (
<ScrollView showsVerticalScrollIndicator={true}>
<View>
<DataTable>
<DataTable.Header>
<DataTable.Title>
<Text>Target Id</Text>
</DataTable.Title>
<DataTable.Title>
<Text>Target Name</Text>
</DataTable.Title>
</DataTable.Header>
{devices?.map((item, key) => (
<DataTable.Row>
<DataTable.Cell>{item.TargetId}</DataTable.Cell>
<DataTable.Cell><TextInput
editable={true}
value={item.TargetName}
theme={{ colors: { placeholder: "#f5f5f5",
background: "transparent",
text: 'green', primary: '#D43790' } }}>
</TextInput>
</DataTable.Cell>
</DataTable.Row>
)
)}
</DataTable>
<View style={styles.textview}>
<Text style={styles.textstyle}>Click on the Target Name to edit</Text>
</View>
</View>
</ScrollView>
)
}
else if(!devices){
return(
<View><Text>No Devices to display</Text></View>
)
}
}
ManageDevice.navigationOptions = navData =>{
return{
headerTitle: 'Manage Devices',
headerTitleStyle:{
color:'white',
},
headerTitleAlign:"left",
headerStyle: {
backgroundColor: '#0437F2',
},
headerLeft: () =>
<HeaderButtons HeaderButtonComponent={HeaderButton}>
<Item
iconName={'chevron-back-outline'}
onPress={() => {
navData.navigation.navigate('Home');
}}
/>
</HeaderButtons>
}
};
const styles = StyleSheet.create({
textview:{
top:'5%'
},
textstyle:{
fontWeight:'bold',
color:'orange'
}
})
export default ManageDevice;
Can anyone tell where I am going wrong? When 'devices' is empty, I want the 'No Devices to display' message. Thanks in Advance

Answer 1

Do it like this:
if(devices && devices?.length > 0){
return(
//Do Something
)
}
else{
return(
<View>
<Text>No Devices to display</Text>
</View>
)
}
Hope this works for you.