React-native-calendars: Dynamically change markedDates using setState

Created on 10 Jun 2019  路  2Comments  路  Source: wix/react-native-calendars

I am trying to mark dates using setState. This is my code:

<Calendar onDayPress={(day) => this.setState({pressedDate: day.dateString})} markedDates={{ this.state.pressedDate : {dots: [vacation, massage, workout], selected: true, selectedColor: 'red'}, this.state.pressedDate : {dots: [massage, workout], disabled: true} }} markingType={'multi-dot'} />

In the code I changed the date 2017-12-14 to this.state.pressedDate but it gives me an error. I want to dynamically change the markedDates using the setState. Could anyone help?

Most helpful comment

@kirhim i had the same problem and was able to do what youre trying to by adding the following to my set state:
this.setState({
mark : { [day.dateString]: {selected: true, selectedColor: '#187ECC', } },
});
you can give mark a default value in the constructor

All 2 comments

@kirhim You are passing 2017-12-14 twice in the markedDates object. Try to compose your object first and then setState, passing the composed object to the prop.

@kirhim i had the same problem and was able to do what youre trying to by adding the following to my set state:
this.setState({
mark : { [day.dateString]: {selected: true, selectedColor: '#187ECC', } },
});
you can give mark a default value in the constructor

Was this page helpful?
0 / 5 - 0 ratings