CODEWITHSUNDEEP
javascriptreact-nativereact-native-calendars
usmandroid
usmandroid

Reputation: 11

State Changed But View Not Updating React Native

I am using 'react-native-calendars' .My Goal is to display dots and then mark multiple dates on users press. Marking dots is a success. I am using markedDates object as state variable but when update markedDates object to add 'selected':true, 'marked':true attributes calendar does not renders it, I checked the markedDates object and everything seemed fine.

below is the code

<Calendar style={{width:'100%',height:300}}
                  markingType={'multi-dot'}
                  onDayPress={(day) => {
                   this.handleConfirm2(day);
                  }}
                  markedDates={this.state.markedDates}
            />

handleConfirm2 method below

var calanderObj = this.state.markedDates;
    
      let o = calanderObj ['2021-09-02'];// adding properties to this spec date for testing
      o['selected'] = true;
      o['mark'] = true;

      calanderObj['2021-09-02'] = o;
      
      this.setState({markedDates:calanderObj},function (){
         console.log("after, state changed but calendar not displaing ",this.state.markedDates);
      });

Upvotes: 0

Views: 637

Answers (1)

Nooruddin Lakhani
Nooruddin Lakhani

Reputation: 6967

Try this way (UPDATED)

  /* This will create the clone of the object with a new ref, 
     so whenever the ref is updated, the view reflects */

  const calanderObj = {...this.state.markedDates};
    
  let o = calanderObj ['2021-09-02'];// adding properties to this spec date for testing
  o['selected'] = true;
  o['mark'] = true;

  calanderObj['2021-09-02'] = o;
  
  this.setState({markedDates:calanderObj},function (){
     console.log("after, state changed but calendar not displaing ",this.state.markedDates);
  });

Upvotes: 1

Related Questions