Calendar Object not updating when useState value that supplied markedDates gets changed


This Content is from Stack Overflow. Question asked by TheMilkMan

I am using the Calendar Object from react-native-calendars and one of the props for its supplied <Calendar> component is markedDates
It is supposed to have a format like the following…

"2022-09-12": {"activeOpacity": 0.5, "color": "white", "dots": [[Object]], "marked": true, "selected": false}, 
"2022-09-14": {"activeOpacity": 0.5, "color": "white", "dots": [[Object]], "marked": true, "selected": false}, 
"2022-09-16": {"activeOpacity": 0.5, "color": "white", "dots": [[Object]], "marked": true, "selected": false}, 
"2022-9-17": {"selected": true}, 
"2022-9-19": {"selected": false}, 

wherein selected if true, activates the selectedStyle on the date, and where dots is an array of dot objects that indicate the presence of dots beneath the date value.

The issue is, notice how ‘2022-9-17’ is set to {selected: true} yet the Calendar does not reflect that. I am console.log-ing the value displayed above in a useEffect, but it does not reflect what is shown in the Calendar. Does anyone aware of Calendar know if there’s a way to get around this, or if I’m doing something improperly? The Calendar is called like so…

    <View style={{height: maxHeight * 0.43}}>
         <CalendarProvider date={selectedDay} onDateChanged={() => handleSetSelectedDay(selectedDay)}> 
                  onDayPress={day => { handleDateClick(day) }}
                  // Other stuff irrelevant for the issue


This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?