React native: How to individually control each onpress() from map() generated components

Question

I'm new to react native. I'm rendering 3 dropdowns in a row, multiple times according to the no of elements in an array. So if the array has 3 elements, there will be 3 rows of 3 dropdowns. But when invoke an onpress from a single dropdown it affects corresponding elements all 3 rows. How can i individually control each row.? Lot of solutions say use bind but the way i tried did not affect anything. click to see the rendered layout looks for 3 elements in the arrray

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:'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})}}/>
                        {(this.state.editstatus)
                          ?<Text>Edit</Text>
                          :<Text></Text>
                        }
                      </View>
                  }</View>)                          
        }) 
      );
  }

Answer 1

You will have to pass a unique key to the onSelect method then you will be able to individually control each row. In the below example, you can see there are two arrays and to get the data of inner array, I have to pass the index of outer array as well as the index of inner array. This will also make it unique.

var arr1 = [1,2,3]
var arr2 = ['a','b','c']


function looper(data1,data2){
  data1.map((item1,index1) => {
   data2.map((item2,index2) =>console.log("item1: " + item1 + " " + index1 + " item2: " + item2 + " " + index2));
  })
}
looper(arr2,arr1);