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

Viewed 9

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...

 return(
    <View style={{height: maxHeight * 0.43}}>
         <CalendarProvider date={selectedDay} onDateChanged={() => handleSetSelectedDay(selectedDay)}> 
              <Calendar
                  markingType={`multi-dot`}
                  markedDates={markedDateObjects}
                  hideExtraDays={true}
                  onDayPress={day => { handleDateClick(day) }}
                  // Other stuff irrelevant for the issue
               />
          </CalendarProvider>
   </View>
)
0 Answers
Related