React Native: I'm dynamically setting options of one drop down depending on another drop down value selection. But this.setlection

Question

I'm new to react-native so this.setstate method is not predictable for me.

I'm selecting a list of Venue on dropdown 1 according to the venue , the number of available days must be shown as options on the second dropdown. and similarly according to the second one i have to set timeslots avaiable on the third dropdown

the 2nd to 3rd dropdown works fine for me but when i select the venue on the first dropdown the 2nd one does not updates. this .setstate is working late there

if i select the venue once more the previously selected days loads not the current one. like setstate method is lagging one step behind

Must be the way i wrote the code , I am open to corrections, new structure of coding , anything but very much in need to get this work

onVenueSelect(index,value){
    var props=this.props;
    console.log('On venue Select................................')
    console.log('index'+index)
    console.log('value'+value)
    console.log(this.state.venue_id_array[index])
    props.getFixtureSlots(this.state.venue_id_array[index], this.state.game_type, this.state.game);
    this.setState({selected_venue_id:this.state.venue_id_array[index]})

    var days=[];
    var timeslots=props.GETFIXTURETIME.timeslot;
    for(var i in timeslots){
      days.push(timeslots[i].day_of_week);
    }
    this.setDay_array(days);
    this.refs.modal_dayselect.select(-1);
    this.setState({selected_venue:value});
  }

  onDaySelect(index,value){
    this.refs.modal_hrsselect.select(-1);
    this.props.getFixtureSlots(this.state.selected_venue_id, this.state.game_type, this.state.game);
    var props=this.props;
    this.setState({selected_day_no:this.state.day_no_array[index]})
    console.log(this.state.day_no_array[index])
    this.setState({selected_day:value})

  }

  render_center_selection(){

      return(
        this.props.selecteddays_array.map((a, i) => {
          return( <View key={i} style={{ height:40, borderBottomWidth:2, borderBottomColor: '#ededed' }}>{
                    <View style={{flexDirection:'column'}}>
                      <View style={{flexDirection:'row'}}>
                        <ModalDropdown 
                            style={styles.selection}
                            defaultValue='Venue'
                            textStyle={{width:200,fontSize:20,textAlign:'center',color: '#7070D8'}}
                            dropdownStyle={styles.dropdownstyle}
                            dropdownTextStyle={{width:350,fontSize:20,textAlign:'center',backgroundColor: '#FDD60B',}}
                            options={this.state.venue_name_array}
                            onSelect={(index,value)=>{this.onVenueSelect(index,value)}}/>
                        <ModalDropdown 
                            ref="modal_dayselect"
                            style={styles.dayselection}
                            defaultValue='Day'
                            textStyle={{width:50,fontSize:15,textAlign:'center',color: '#7070D8'}}
                            dropdownStyle={styles.daydropdownstyle}
                            dropdownTextStyle={{width:50,fontSize:15,textAlign:'center',backgroundColor: '#FDD60B',color: '#7070D8'}}
                            options={this.state.day_array}
                            onSelect={(index,value)=>{this.onDaySelect(index,value)}}/>
                        <ModalDropdown 
                            ref="modal_hrsselect"
                            style={styles.dayselection}
                            defaultValue='HRS'
                            textStyle={{width:50,fontSize:15,textAlign:'center',color: '#7070D8'}}
                            dropdownStyle={styles.daydropdownstyle}
                            dropdownTextStyle={{width:50,fontSize:15,textAlign:'center',backgroundColor: '#FDD60B',color: '#7070D8'}}
                            options={this.state.hrs_array}
                            onSelect={(index,value)=>{this.setState({selected_hr:value})}}/>
                      </View>

                    </View>
                  }</View>);                           
        }) 
      );
  }

These two answers will help you understand what the problem is : https://stackoverflow.com/questions/44492678/when-does-reacts-setstate-change-the-state/44493095#44493095 and https://stackoverflow.com/questions/41278385/this-setstate-doesnt-update-value/41278440#41278440 — Shubham Khatri, Jun 22 '17 at 10:55
Yeah, but now it updates the value sometimes, sometimes does not. thanks for the help — vishnu_raj, Jun 22 '17 at 12:46

score 0 · Answer 1 · answered Jun 22 '17 at 17:02

First thing you have to do is to remove all console.log statements from your code. It really helpful but slows down the app rendering/refreshing rate.

Second thing and the most important thing is to consolidate state setting calls. ie, you only need one setState call inside one action. For every setState call the app re-renders the parts which uses that changed state. So, update multiple states at once otherwise it will not be detected by the react.

React Native: I'm dynamically setting options of one drop down depending on another drop down value selection. But this.setlection

1 Answers1