How to work with linked MDBSelect components

Nitin.Chanana commented 6 years ago

Our code:

State creation:

per:[{ id:1,

        title:'Per Team',

        mode:true},{ id:2,

        title:'Per Player',

        mode:false},{ id:3,

        title:'Per 2 Person Team',

        mode:false}],

Map function for binding:

getPerTeamorPlayer=()=>{

  let result=this.state.per.map((item) => (

    item.mode==true?

     <MDBSelectOption key={item.id} className="selectli" selected value={item.id}> {item.title}</MDBSelectOption>:<MDBSelectOption key={item.id} className="selectli" value={item.id}> {item.title}</MDBSelectOption>

    ))

    return result

}

Populating the items:

           const perteamplayer=this.getPerTeamorPlayer();

   <MDBSelect getValue={(value)=>this.handleChange("PerTeam",value)} >

         <MDBSelectInput  selectedIndex={this.state.details.PerTeam} className="InputText"/>

         <MDBSelectOptions>

         {

         perteamplayer

         }

         </MDBSelectOptions>

       </MDBSelect>

updating the state variable:

var per2=this.state.per

per2[0].mode=false;

per2[1].mode=true;

per2[2].mode=false;

var per1=[{}]

this.setState({

per:per1

});

this.setState({

per:per2

})