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

CodePudding user response：

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.