How to work with linked MDBSelect components


Topic: How to work with linked MDBSelect components

Nitin.Chanana asked 6 years ago

We have multiple MDBSelect component on one page. We want to update the items of one MDBSelect on the basis of value of another MDBSelect. We are not able to achieve this. The state is getting updated but the same is not reflecting in the MDBSelect component. 


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

})


Jakub Mandra staff premium answered 6 years ago

Hi,

You should use Select module described in documentation as "Alternative". It is controllable and flex. Only this approach allows to update select's inner state. 

https://mdbootstrap.com/docs/react/forms/select/#alternative


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.8.4
  • Device: Laptop
  • Browser: Google Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No