I have array in my state I set my state default value to an empty array []. After an API request loads I need to use loader until data is ready. So U use condition like:
(if array length === 0 loader will show otherwise data will show)
but when the API returns empty data I want to show no data available.
What is best way to do that?
My code is below - how can I check the condition if the API returns an empty result?
this.state.offer.length == 0 ? <Loader /> : <OfferList />
Easiest would be to have the default be undefined rather than an empty array. Then in your render check:
undefined means its loading{!this.state.offer ? <Loader /> : this.state.offer.length ? <OfferList /> : <span>No data available</span>}
undefined as your reducer's default, you would use null, as this is an acceptable return value from reducer. The logic being it being that undefined is disallowed because it could just be no state passed at all to the reducer arg, while null is an explicit value that has been set. I use this pattern for exactly this purpose and works a treatBest approach would be to use the ternary operation. First initialize offer to be undefined and you API returns an empty array if there is no data. Next use below expression in render method().
{this.state.offer === undefined ? <Loader /> : this.state.offer.length > 0 ? <OfferList /> : "No data Available"}
Ideally, you should not show or hide the loader on the basis of the size of your array it should depend on your AJAX call.
Simply you can put a variable in your state like "isLoading", mark it true on making ajax call and mark it false on response independent of whether it is a success or failure.
this.state ={
offer: [],
isLoading: false
}
on ajax, call
this.setState({isLoading:true});
on the response, call
this.setState({isLoading:true});
and you can display
no data available on the basis of size of array.
Add another property in your state denoting processing like below
state = {
offer: [],
processing: false
}
then use this property to show/hide your loader.
You can set/unset this property, while you make API call.
if responseFromAPI.length==0 this.setState({emptyAPIResponse: true}), then use that for conditional renderingrenderfunction?