Topic: How to store values of more than one MDBSelect component in a form into state?
Nitin.Chanana free asked 5 years ago
We have a form with more than one MDBSelect components. How can we store the values of each of these components in different state variables? Is there a way to identify these components separately?
Anna Morawska staff answered 5 years ago
Hi there,
yes, sure, I've prepared a small demo which shows how to store values of each component:
import React, { Component } from "react";
import {
MDBSelect,
MDBSelectInput,
MDBSelectOptions,
MDBSelectOption,
} from "mdbreact";
class SelectPage extends Component {
state = {
select1: "",
select2: ""
}
handleValueChange = (selectId, value) => {
const select = `select${selectId}`
console.log(select);
this.setState({
[select]: value
})
}
render() {
return (
<>
<div>
<MDBSelect getValue={value => this.handleValueChange('1', value)}>
<MDBSelectInput selected="Choose your option" />
<MDBSelectOptions>
<MDBSelectOption disabled>Choose your option</MDBSelectOption>
<MDBSelectOption value="1">Option nr 1</MDBSelectOption>
<MDBSelectOption value="2">Option nr 2</MDBSelectOption>
<MDBSelectOption value="3">Option nr 3</MDBSelectOption>
</MDBSelectOptions>
</MDBSelect>
<label>Material Select</label>
</div>
<div>
<MDBSelect getValue={value => this.handleValueChange('2', value)}>
<MDBSelectInput selected="Choose your option" />
<MDBSelectOptions>
<MDBSelectOption disabled>Choose your option</MDBSelectOption>
<MDBSelectOption value="1">Option nr 1</MDBSelectOption>
<MDBSelectOption value="2">Option nr 2</MDBSelectOption>
<MDBSelectOption value="3">Option nr 3</MDBSelectOption>
</MDBSelectOptions>
</MDBSelect>
<label>Material Select</label>
</div>
<h1>Select 1: {this.state.select1}</h1>
<h1>Select 2: {this.state.select2}</h1>
</>
);
}
}
export default SelectPage;
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 5 years ago
Can anyone please advise? It is very urgent.