how close parent modal when open child modal in Reactjs?

Question

I can not close current modal when open new modal in React js. please help me. I have parent modal: Register_modal and child of it: RegisterCode_Modal parent modal is called in header component:

first: Header component

this component call first modal and pass open and close props to it:

import React , {Component} from 'react';
import ReactDOM from 'react-dom';
import {NavLink} from 'react-router-dom';
import Register_Modal from './Register_Modal';


export default class Header extends Component {
    constructor() {
        super();

        this.state = {
         modalIsOpen: false
        };
    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
    }

    openModal(e) {
        e.preventDefault();
        this.setState({modalIsOpen: true});
      }

    closeModal(e) {
        e.preventDefault();
        this.setState({modalIsOpen: false});
      }

  render() {
    return (
<div>
<div className="button navbar-right">
   <button className="navbar-btn nav-button wow bounceInRight login"  data-wow-delay="0.45s">ورود</button>
   <button className="navbar-btn nav-button wow fadeInRight"  data-wow-delay="0.48s" onClick={this.openModal} >ثبت نام</button>
                        <div >
 <Register_Modal open={this.state.modalIsOpen} close={this.closeModal} />
                        </div>

</div>
    );
  }


}
---------------------------------------------------------------------------

second: parent component

export default class Register_Modal extends Component {
   constructor(props){
       super(props);
       this.state={
           codemodal: false
       };
       this.openCodeModal=this.openCodeModal.bind(this);
       this.closeCodeModal=this.closeCodeModal.bind(this);
   }
   openCodeModal(e){
       e.preventDefault();
       this.setState({codemodal: true});
   }
   closeCodeModal(e){
    e.preventDefault();
    this.setState({codemodal: false});
}
    render() {
      return (
        <div>  
              <Modal  
              isOpen={this.props.open} 
              onRequestClose={this.props.close}
              ariaHideApp={false}
              contentLabel="selected option"
              isClose={this.props.close}
              style={customStyles}
              >
              <h2>salammmmm</h2>
              <button onClick={this.props.close} >انصراف</button>
              <button onClick={this.openCodeModal} >بعدی</button>

              </Modal>
              <div className="ReactModalPortal">
              <RegisterCode_Modal open={this.state.codemodal} close={this.closeCodeModal}  />
              </div>
              {this.props.close}
          </div>

      );}
    }
------------------------------------------------------------------

third: child component

export default class RegisterCode_Modal extends Component {
    constructor(props){
        super(props);
        console.log("injaaaaa");
    }


 render() {
   return (
     <div>  
           <Modal  
           isOpen={this.props.open} 
           onRequestClose={this.props.close}
           ariaHideApp={false}
           contentLabel="ورود کد"
           isClose={this.props.close}
           style={customStyles}
           >
           <h2>مرحله کد</h2>
           <button onClick={this.props.close} >تائید</button>
           </Modal>
       </div>

   );}
 }

Answer 1

You can simply achieve this by rendering them conditionally.
I personally so this:

export default class RegisterModal extends Component {
  state = {
    showBaseModal: true,
    codemodal: false,
  };

  openCodeModal = () => {
    this.setState({
      codemodal: true,
      showBaseModal: false,
    });
  };

  closeCodeModal = () => {
    this.setState({ codemodal: false });
  };

  render() {
    return (
      <div>
        {this.state.showBaseModal && (
          <Modal
            isOpen
            onRequestClose={this.props.close}
            ariaHideApp={false}
            isClose={this.props.close}
          >
            <button onClick={this.props.close}>Close</button>
            <button onClick={this.openCodeModal}>Next</button>
          </Modal>
        )}
        {this.state.codemodal && (
          <RegisterCode_Modal
            open={this.state.codemodal}
            close={this.closeCodeModal}
          />
        )}
      </div>
    );
  }
}

Adding an extra state for base modal. On openCodeModal event, toggle it to false to stop both modals.
Set isOpen always to true for both modals, and then render RegisterModal component conditionally .