React-native-calendars: Hooks updating markedDates props does not re-render

[dl-husky73]

I use react-native-calendars in a couple cases. In this case I want user to press and change status of markedDate to change color of same date cycling thru a range.

Here is dayPress update:
const [gMarkedDates, setGMarkedDates ] = useState([]);

//Function when click on scheduled date
const gDayPress = (dayObj) => {
var selected = {};
if (gMarkedDates[dayObj]) {
selected = gMarkedDates[dayObj];
let newDates = gMarkedDates //copy the array
if (selected && selected.status) {
newDates[dayObj]=markedDatesParams1;
} else if (selected && !selected.status) {
newDates[dayObj]=markedDatesParams;
}
setGMarkedDates( newDates );
};
};

gMarkedDates is updated correctly but the calendar doesn't update. I console.log the gMarkedDates and the props have changed.

Expected Behavior

I expected the calendar to re-render and change props (color of day)

Observed Behavior

Nothing changes, if I look at different tab and then go back the calendar is correct. Just not re-rendering.

I do the same thing in another case but add or remove the markedDate and it works great. Very confused but I only change the props here.

RN Calendars: 1.220.0
RN: 61.4

Anyone help?

[abeltje1]

Have you tried setting the key property of the calendar? Just as with any react component, you can control its re-rendering via the key prop. In my case this worked :)

[dl-husky73]

Have you tried setting the key property of the calendar? Just as with any react component, you can control its re-rendering via the key prop. In my case this worked :)

Thanks for suggestion, I added the key but it doesn't seem to help. Again the actual data is changed, and if I switch tabs a re-render occurs but not the calendar. I am thinking of moving the update to a UseEffect hook rather than a function.

[archieherbias]

@dl-husky73 This helped me to re-render the newly marked dates:
https://github.com/wix/react-native-calendars/issues/726#issuecomment-458659037

And also the key prop suggestion helped me as well for the Agenda component to re-render the selected date when setting it using react hooks. (e.g. key={selectedDate})

[dl-husky73]

@dl-husky73 This helped me to re-render the newly marked dates:
#726 (comment)

And also the key prop suggestion helped me as well for the Agenda component to re-render the selected date when setting it using react hooks. (e.g. key={selectedDate})

Thanks so much archieherbias, changing my markedDates copy from straight hook copy to your suggestion, let newDates = JSON.parse(JSON.stringify(gMarkedDates)) and then resetting the hook once a parameter modified worked perfectly! Another problem solved! :) That closed the issue for me!

[dagan-arbox]

@dl-husky73 This helped me to re-render the newly marked dates:
#726 (comment)
And also the key prop suggestion helped me as well for the Agenda component to re-render the selected date when setting it using react hooks. (e.g. key={selectedDate})

Thanks so much archieherbias, changing my markedDates copy from straight hook copy to your suggestion, let newDates = JSON.parse(JSON.stringify(gMarkedDates)) and then resetting the hook once a parameter modified worked perfectly! Another problem solved! :) That closed the issue for me!

"and then resetting the hook once a parameter modified"
what do you mean? cause it does not work for me!

getMarkedDates = () => { const marked = {}; this.props.weekly.forEach(item => { marked[item] = {marked: true, dotColor: Colors.green}; }); return JSON.parse(JSON.stringify(marked)); };

[dl-husky73]

@dl-husky73 This helped me to re-render the newly marked dates:
#726 (comment)
And also the key prop suggestion helped me as well for the Agenda component to re-render the selected date when setting it using react hooks. (e.g. key={selectedDate})

Thanks so much archieherbias, changing my markedDates copy from straight hook copy to your suggestion, let newDates = JSON.parse(JSON.stringify(gMarkedDates)) and then resetting the hook once a parameter modified worked perfectly! Another problem solved! :) That closed the issue for me!

"and then resetting the hook once a parameter modified"
what do you mean? cause it does not work for me!

getMarkedDates = () => { const marked = {}; this.props.weekly.forEach(item => { marked[item] = {marked: true, dotColor: Colors.green}; }); return JSON.parse(JSON.stringify(marked)); };

Dagan-arbox, I used hooks and my problem was the calendar didn't re-render when I changed parameters. I did the following on daypress. I have a set of markeddates that can be pressed to turn off and on again. I had the same prior but the JSON.parse update (provided above) re-rendered the calendar for me. I set the On/Off parameters in markedDatesParams1 & markedDatesParams. All works great.

//Function when click on scheduled date
const gDayPress = (dayObj) => {
var selected = {};
if (gMarkedDates[dayObj]) {
selected = gMarkedDates[dayObj];
//copy marked dates, have to parse so object is read by calendar
let newDates = JSON.parse(JSON.stringify(gMarkedDates))

if (selected && selected.status) {
    newDates[dayObj]=markedDatesParams1;
} else if (selected && !selected.status) {
    newDates[dayObj]=markedDatesParams;
}
setGMarkedDates( newDates );

};
};