Material switch example MDBSwitch - calls handleSwitchChang

Topic: Material switch example MDBSwitch - calls handleSwitchChange twice

David J asked 3 years ago

Looking at your example Material switch from here:

I put in some console.log displays to check the status of the setting being toggled and I see that the onChange handler is being called twice

This is your code with just 2 lines of console.log inserted

this.state = {
        switch1: true,
        switch2: false

handleSwitchChange = nr => () => {
    let switchNumber = `switch${nr}`;
    console.log('switch number is ', switchNumber)
        [switchNumber]: !this.state[switchNumber]
    console.log('switch', !this.state[switchNumber])

render() {
    return (
            <MDBSwitch checked={this.state.switch1} onChange={this.handleSwitchChange(1)} />
            <MDBSwitch checked={this.state.switch2} onChange={this.handleSwitchChange(2)} />


the output displays like this when switch 1 is toggled.. The second switch is not being touched. enter image description here

Aliaksandr Andrasiuk staff answered 3 years ago


Thank you for the founded bug!

We will fix this in the near future.

Best regards.

David J answered 3 years ago

Have you agreed that this is a bug? To me it is a serious issue as I am using onChange={this.handleSwitch} where I toggle various settings and make a DB call etc. By this onChange being called twice, the toggle ends up back in its original value and of course, I don't want to make twice as many DB calls etc I am surprised that nobdy else has reported this issue.

If you can pleas confirm that this is a defect and if it will be fixed quickly.

Thanks David

Aliaksandr Andrasiuk staff commented 3 years ago


Yes, it's a bug. It will be fixed in our upcoming release on 19.08.

Best regards.

David J answered 3 years ago

I can confirm that this is resolved in 4.19.1

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.18.0
  • Device: Desktop
  • Browser: Chrome
  • OS: WIndows 10
  • Provided sample code: No
  • Provided link: Yes