Currently, I am in the process of developing an app using React Native. My goal is to display information (text) below my CalendarList based on data stored in an array. One of the properties in the array is the date. To achieve this, I have created a filtering function that filters the dates according to the current month. The currentMonth is updated every time there is a change in the month, as shown below:
onMonthChange={ async (month) => {
setIsLoading(true)
const monthInt = parseInt(month.dateString.split("-")[1])
await setCurrentMonth(monthInt - 1)
}}
The filtered data looks like this:
const filteredData = async () => {
const temp = datas.filter((item) => {
const dateParts = item.dayOffDate.split("-")
const month = Number(dateParts[1]) - 1
return month === currentMonth
})
setFilteredData(temp)
await setIsLoading(false)
}
This is how my View appears:
<CalendarList/>
{isLoading ? ( <ActivityIndicator size="small" />
) : (
// This view displays the filtered data
<FlatList
data={filteredData}
renderItem={renderListItem}
/>
)}
My objective is to have the loading indicator appear each time the filtered data is being updated, but unfortunately, it's not functioning properly...
I would greatly appreciate any assistance or questions for clarification. Thank you :)