Topic: GetValue for Select causes React To Exceed Update Depth
Stefischer free asked 4 years ago
Using the getValue
prop on MDBSelect
causes React to exceed update depth by calling the function multiple times.
renderChannels() {
let Channels = this.props.channels.map((el, idx) => {
return { text: el.name, value: el.id };
});
return(
<MDBSelect
search
options={Channels}
selected="Choose your option"
label="Example label"
getValue={this.handleSelectChange}
/>
);
}
handleSelectChange(value) {
this.setState({ newValue: value[0] }, () => console.log(this.state))
}
Jakub Chmura staff answered 4 years ago
Hi @Stefischer,
I tested this solution and it works fine for me.
I think your channel function works wrong.
I paste the working version below.
import React, { Component } from 'react';
import { MDBSelect } from 'mdbreact';
class SelectPage extends Component {
state = {
options: [
{
checked: false,
disabled: false,
text: 'Option One',
value: '1'
},
{
checked: false,
disabled: false,
text: 'Option Two',
value: '2'
},
{
checked: false,
disabled: false,
text: 'Option Three',
value: '3'
},
{
checked: false,
disabled: false,
text: 'Option Four',
value: '4'
}
],
newValue: ''
};
handleSelectChange = value => {
this.setState({ newValue: value[0] }, () =>
console.log(this.state.newValue)
);
};
render() {
return (
<MDBSelect
color='primary'
getValue={this.handleSelectChange}
options={this.state.options}
label='Basic example'
/>
);
}
}
export default SelectPage;
Best, Kuba
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- ForumUser: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.25.1
- Device: Desktop
- Browser: FireFox
- OS: Win10
- Provided sample code: Yes
- Provided link: No