title: React open modal window on click in another component
body: <p>I am using the basic component modal component of react - <a href="https://github.com/reactjs/react-modal" rel="nofollow noreferrer">https://github.com/reactjs/react-modal</a></p>
  
  <p>What I am trying to achieve is that I want to open the modal from another parent that has the modal imported.</p>
  
  <p>Component CountryPopup</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export default class CountryPopup extends Component {
      constructor(props) {
          super(props);
          this.state = {
            modalIsOpen: this.props.isShowModal,
            popupName: (myIsSet(this.props, "data.name")) ? this.props.data.name : 'CountryPopup',
          };
      }
  
      componentDidMount() {
          if (typeof window.dataLayer != "undefined" &amp;&amp; this.props.isShowModal) {
              window.dataLayer.push({
                  "event":"show popup",
                  'eventCategory': 'popup',
                  'eventAction': 'show',
                  'eventLabel': this.state.popupName,
              });
          }
      }
  
      handleClick() {
          this.closeModal();
      }
  
      closeModal() {
         .....
      }
  
      afterOpenModal = () =&gt; {
          document.body.classList.add("overflow-hide");
      }
  
      render() {
  
          console.log(this.state.modalIsOpen);
  
          return (
              &lt;div&gt;
                  {
                      typeof window != "undefined" &amp;&amp;
                      &lt;Modal isOpen={this.state.modalIsOpen}
                          onAfterOpen={() =&gt; this.afterOpenModal()}
                          contentLabel="This is for testing"
                          ariaHideApp={false}
                          className={{
                              base: 'myReactModal dynamic-popup-myReactModal',
                              afterOpen: 'myReactModal_after-open',
                              beforeClose: 'myReactModal_before-close'
                          }}
                          overlayClassName={ {
                              base: 'myOverlayClass dynamic-popup-myOverlayClass',
                              afterOpen: 'myOverlayClass_after-open',
                              beforeClose: 'myOverlayClass_before-close'
                          }}
                      &gt;
                          ......
                      &lt;/Modal&gt;
                  }
              &lt;/div&gt;
          );
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>another Component HomeView - in this component want to open modal window onclick</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class HomeView extends Component {
  
          // onShowModal = () =&gt; {
          //     // &lt;CountryPopup isShowModal={true}  /&gt;
          //     console.log("You clicked me");
          //     // this.setState({showModal:true})
          // }
  
      render () {
          var app = this.props.app;
          var data = this.props.home.data || {};
          let dfp = this.props.dfp;
          let outbrainAds = dfp.outbrain;
  
          let currentUrl = this.props.user.baseUrl + this.props.location.pathname.replace("/", "");
  
  
          return (
              &lt;BaseLayout match={this.props.match} isCallWallpaper={true} fromHome={true} /&gt;
  
              &lt;CountryPopup isShowModal={true}  /&gt;
              
              
              }
              
      export default HomeView;</code></pre>
  </div>
  </div>
  </p>
  
  <p>currently, popup is visible on load</p>