Topic: How to avoid `MDBSelect` to do multiples re-calls using `getValue`?
I have an MDBSelect component and a handle function to get its changes, like that:
<MDBSelect
search
options={props.facilities.map((Facility) => {
return {
text: Facility.Name,
value: Facility.ID.toString(),
};
})}
getValue={props.handleSelect}
/>
And the handler:
const handleSelect = (value) => {
const newFormContents = { ...formContents };
newFormContents["FacilityID"] = value[0];
setFormContents(newFormContents);
};
But getValue keep calling the handler after the change, and causing the follow error:
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
I'm using gatValue because I didn't find a onChange method in the API documentation.May you help me telling what am I doing wrong?
Hi @caio.davi,
Probably your getValue handler causes multiple re-calls. Please check this example, everything works fine. You need to follow the example below and try to fix your getValue handle function.
import React, { Component } from 'react';
import { MDBSelect } from 'mdbreact';
class SelectPage extends Component {
state = {
options: [
{
checked: false,
disabled: false,
icon: null,
value: '1',
text: 'Option 1',
},
{
checked: false,
disabled: false,
icon: null,
value: '2',
text: 'Option 2',
},
{
checked: false,
disabled: false,
icon: null,
value: '3',
text: 'Option 3',
},
],
};
getValueOfSelect = (value) => {
console.log(value);
};
render() {
return (
<div>
<MDBSelect
multiple
options={this.state.options}
selected='Choose your option'
getValue={this.getValueOfSelect}
/>
</div>
);
}
}
export default SelectPage;
Best, Kuba
karthickumar88 commented 4 years ago
Hi Kuba,
Your example just print the selected value. But the problem is when we update the options when user select any value in from the select, then the error occur.
Thanks, Karthic
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.26.0
- Device: PC
- Browser: any
- OS: Debian
- Provided sample code: No
- Provided link: Yes