How to store values of more than one MDBSelect component in


Topic: How to store values of more than one MDBSelect component in a form into state?

Nitin.Chanana asked 6 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?


Nitin.Chanana commented 6 years ago

Can anyone please advise? It is very urgent.


Anna Morawska staff answered 6 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;

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