Topic: How to work with linked MDBSelect components
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.
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: 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
Nitin.Chanana free 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
})