CODEWITHSUNDEEP
react-native
prashant dexbytes
prashant dexbytes

Reputation: 61

What is the best way to deal with empty error message in react native?

I have to display a error message called "No record available". This is my scenario : -

API Call {
if (data){
loading == false
 }
}

In my component 

    Render(){
      {
         data.length > 0 && this.state.loading == false ?
               <Flat List/>
         : null
      }
     {
         data.length==0 ?
               <Text>No Record found</Text>
: null
      }
    }

My Problem was , my message displays if data not found but it doesn't refresh. I have to achieve a scenario like this -

when i open or navigate through a page then its first show blank then loader start and after API call if data not found then they display a message.

Upvotes: 0

Views: 1518

Answers (2)

Zayco
Zayco

Reputation: 327

This is a working example of what you describe. When the component loads the data is empty until your API call runs in componentDidMount. I have emulated the API call with a timeout of 2 seconds. You need to switch out the setTimeout function in apiCall with your own fetch method and set the state in the callback of that function

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

class Test extends Component {
  state = {
    loading: false,
    data: [],
  };

  componentDidMount() {
    this.apiCall();
  }

  apiCall = () => {
    this.setState({ loading: true });

    setTimeout(() => {
      this.setState({
        loading: false,
        data: ['1', '2', '3'],
      });
    }, 3000);
  };

  render() {
    if (this.state.loading) return <Text>Loading...</Text>;
    if (this.state.data.length === 0) return <Text>No records found</Text>;

    return (
      <View>
        <Text>Records found</Text>
      </View>
    );
  }
}

export default Test;

Upvotes: 1

Hardik Virani
Hardik Virani

Reputation: 1755

You can bind your action and reducers data here this is the example you want 

import React, { Component } from 'react';
import {
    Text,
    View,
    Dimensions,
    FlatList,
    ScrollView,
} from 'react-native';
import { connect } from 'react-redux';
import {showLoading, getProducts} from '../actions/productAction';
import * as Progress from 'react-native-progress';

class Data extends Component {



    this.state = {
        product: [],
        loading: false
    };

    componentWillMount() {
        this.setState({loading: true});
        API CALL();
    }


    render() {
        return (
            <View>

                {this.state.isLoading ?
                    <View>
                        <Progress.CircleSnail thickness={5} size={55} color={['#000000', '#000000', '#FFFFFF',]} />
                    </View>
                    :
                    null
                }

                {this.state.product.length === 0 && <View>
                    <Text>{"NO PRODUCT"}</Text>
                </View>}

                <FlatList
                    data={this.state.product}
                />

            </View>
        );
    }
}



export default Data;

Upvotes: 0

Related Questions