Changing Switch state does not visually toggle switch

Upgrading to 4.16.0 solved the issue! Thanks! :)

Hi. I tested your code and I think you probably did typos in the code (for example: MDBtn -> MDBBtn) . Also you can use one function on two elements. You can use this code and test it in the project

My code:

State:

this.state = { switchInput: false };

Function

toggleSwitch = () => { this.setState({switchInput: !this.state.switchInput}); }

Render code

<MDBBtn onClick={this.toggleSwitch}>Test</MDBBtn>
<MDBSwitch checked={this.state.switchInput} onChange={this.toggleSwitch} />

You are correct, I had a typo...sorry. Your answer is correct. However, the issue seems to be that changing the switch property (with a setState) from any other event than the onChange of the MDBSwitch component does NOT change the visual state of the toggle.

Is this possible?

If you wanna use a different event on a MDBSwitch you can also set this events:

• getValue={this.toggleSwitch}
• onMouseUp={this.toggleSwitch}
• onMouseDown={this.toggleSwitch}
• onDoubleClick={this.toggleSwitch}

if you use "console.log (this.state.switchInput)" in your function, you can see how Switch will change using for example "onClick" :)

The issue seems to be that changing the switch property (with a setState) from any other event (or component) than the onChange of the MDBSwitch component does NOT change the visual state of the toggle.

Is this possible?

Can you send me full code and write more about this problem?

You can use any events but, function must change "checked" on component porps:

<MDBSwitch checked={this.state.switchInput} onChange={this.toggleSwitch} />

I have shared the code above but here is my exact scenario:

I have a MDBSwitch that opens a MDBModal When clicked the MDBSwitch opens the modal and visually moves to the true checked state When I click the Close button on the Modal, I set the state of the checked property for the MDBSwitch to false, however the MDBSwitch still remains in the true checked state visually.

Hi @famu1hundred,

I create an app according to your scenario:

import React, { Component } from "react";
import { MDBSwitch, MDBContainer, MDBBtn, MDBModal, MDBModalBody, MDBModalHeader, MDBModalFooter } from "mdbreact";

class App extends Component {
state = {
  switch: false,
}

handleSwitchChange = () => {
  this.setState({
    switch: !this.state.switch
  });
}

render() {
  return (
    <div>
      <MDBSwitch checked={this.state.switch} onChange={this.handleSwitchChange} />
      <MDBContainer>
      <MDBModal isOpen={this.state.switch} toggle={this.handleSwitchChange}>
        <MDBModalHeader toggle={this.handleSwitchChange}>MDBModal title</MDBModalHeader>
        <MDBModalBody>
          This is my modal
        </MDBModalBody>
        <MDBModalFooter>
          <MDBBtn color="secondary" onClick={this.handleSwitchChange}>Close</MDBBtn>
        </MDBModalFooter>
      </MDBModal>
    </MDBContainer>
    </div>
    );
  }
}

export default App;

I have no problems with my code. Can you try it and tell me if it works well for you? I used one function to change the modal and switch state. I have only one state for modal and switch.

Your regards, Konrad.

I tried this exact code and the issue is still the same. After closing the modal, the MDBSwitch remains in the On state visually. Notice the 3 screenshots. The first is before clicking the switch (MDBSwitch is in Off position). The second is when the modal opens (MDBSwitch is in On position). The third is after the modal closes (MDBSwitch is STILL in On position). I would expect the MDBSwitch to be back to the Off position after the modal closes.