title: React call a function from wrapper component
body: <p>I am not that experienced with React, but i've been assigned to an existing complex React project. I have a popup that only showed once but it can load a particular component. I want to close a popup by the button from other components, actually the function to close popup exists in wrapper component, but how to call it from the non-class component?</p>
  
  <p>I have a popup called <code>ModalView.jsx</code>, it's a wrapper : </p>
  
  <pre><code>class ModalView extends Component {
    static propTypes = {
      //...
      isShow: PropTypes.bool,
    };
    static defaultProps = {
      isShow: false,
    }
    render() {
      const {
        isShow,
        showedComponent,
      } = this.props;
  
      onCancel = () =&gt; {
        const { showPagePopup } = this.props;
        showPagePopup({ isShow: false });
      }
      return (
        &lt;div
          className={cx('page-popup modal fade', {
            'd-block show': isShow,
          })}
          tabIndex="-1"
          role="dialog"
          aria-hidden="true"
        &gt;
          &lt;div className="modal-dialog" role="document"&gt;
            &lt;div className="modal-content"&gt;
              &lt;button type="button" className="close close-modal" data-dismiss="modal" aria-label="Close" onClick={() =&gt; this.onCancel()}&gt;
                &lt;IconCloseModal width="14" height="14" className="icon icon-close" /&gt;
              &lt;/button&gt;
              &lt;div className="modal-body"&gt;
                {showedComponent}
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>and i have a component that be showed in <code>{showedComponent}</code> called <code>MyCard.jsx</code> :</p>
  
  <pre><code>const MyCard = ({
  myRules = isShow
  }) =&gt; {
      const openPage = () =&gt; {
        // -------how to call onCancel() function from ModalView.jsx in this line?--------
        var pageUrl = `xxx`;
        setTimeout(function(){
          window.open(pageUrl, '_blank');
        }, 3000);
      }
  return (
    ...
    &lt;PrimaryButton onClick={() =&gt; openPage()} className="hide-for-print-version ml-3"&gt;
       Open Page
    &lt;/PrimaryButton&gt;
    ...
  );
  };
  </code></pre>
  
  <p>So how to call <code>onCancel()</code> function from <code>ModalView.jsx</code> to <code>MyCard</code> const component?</p>