Changing date doesn't show new data in react native - reactjs

Question

I am working on a react native app where i'm using native base for design purpose. I am using date picker from native base. Also i'm showing different results of different dates which i'm fetching from api. Now, some dates have data and some don't. When I pick a date that doesn't have data it shows blank as expected. But after showing blank I can't get data from other dates which have data. it kind of gets stuck. But if I select the dates that have data,it works fine. Here's the code I have now:
async setDate(newDate) {
let day = newDate.getDate()
console.log('date', day)
let month = newDate.getMonth() + 1
let year = newDate.getFullYear()
day = String(day).length > 1 ? day : '0' + day
month = String(month).length > 1 ? month : '0' + month
let fullDate = 'https://myapi'+year+month+day
await fetch(fullDate, {
method: 'GET',
})
.then((response) => response.json())
.then((response) => {
console.log('new', response)
if(response === null){
this.setState({
tableData1: [],
tableData2: [],
tableData3: [],
})
} else {
const first = response.First
this.setState({ tableData1: first })
const second = response.Special
this.setState({ tableData2: second })
const third = response.Consolidation
this.setState({ tableData3: third })
}
})
}
What can I do to get data as usual after selecting a date which doesn't have any value?

Answer 1

I'm quite surprised you're not receiving any errors here in console or on screen - are you testing on a device or simulator?
if(response === null) is your problem, undefined === null evaluates to false, so you're pushing into your else statement and trying to access response.First etc which is undefined and will cause an error to throw - this is why things get 'stuck'.
You can simplify your check and, as mentioned in my comment, the if else could be cleaned up quite a bit as you don't need to assign data from the response object to variables because you're not re-using them - and your multiple calls to setState will cause three re-renders of the component.
Some examples of how concise this block could be. I'll explain what I'm doing as I'm unaware of your experience and other readers may be less experienced than yourself:
if(!response)
this.setState({tableData1: [], tableData2: [], tableData3: []})
else
this.setState({
tableData1: response.First,
tableData2: response.Special,
tableData3: response.Consolidation
})
A simple if(!response) check to fix the error, setState being merged into one call and values being pulled directly from the response object. You'll notice i've omitted the curly braces from both the if and else blocks as they are both single statement blocks.
Or you could take it one step further:
.then((response) => {
this.setState({
tableData1: response.First ? response.First : [],
tableData2: response.Special ? response.Special : [],
tableData3: response.Consolidation ? response.Consolidation : []
})
}
Here we combine into a single setState call, using a ternary operator to assign each piece of state to data from the response object, or to an empty array. You'll notice each condition is based on response.key instead of just response - this is safer and less likely to cause errors (unless you're absolutely certain there can be no situation in which response contains some, but not all, of those keys)