Close modal A after opening modal B from modal A in reactjs with react-bootstrap

Question

The case is like I have a registration button and when I am clicking on that then signup modal will popup. Now I want to open Login modal from signup modal but signup modal should be closed after login modal popped up.

show={this.props.signupModalOn}
onHide={this.props.onSignupModalCall}

show={this.props.loginModalOn}
onHide={this.props.onLoginModalCall}

Here is the code for ModalA.js and ModalB.js

I tried some cases and I am getting nested popup modal but the first modal is not getting closed.

Answer 1

As the Sign-Up modal is handled by the parent of the component you have to pass down the setState function to be able to update it in the child component. Let's call the function parentStateUpdate and the state value signUpModalOn for simplicity:

<ModalA parentStateUpdate={value => this.setState({ signUpModalOn: value })} />;

Then you can modify onLoginModalCall like this:

onLoginModalCall = () => {
  this.setState({ loginModalOn: !this.state.loginModalOn, static: true });
  parentStateUpdate({ signUpModalOn: false });
};