title: Passing Event Method to Grandchild Component
body: <p>I'm a bit new to React, so forgive me if this is a bit of a newb question.</p>
  
  <p>I have a base component (Page) which uses state to control whether or not a modal popup is displayed:</p>
  
  <pre><code>constructor(props) {
      super(props);
  
      this.state = {
          showModal : false,
          modalContent : 'Initial Modal Content'
      };
  
      this.showModal = this.showModal.bind(this);
      this.hideModal = this.hideModal.bind(this);
  }
  
  showModal(modalContent) {
      this.setState({
          showModal : true,
          modalContent : modalContent
      });
  }
  
  hideModal(e) {
      this.setState({showModal : false});
  }
  </code></pre>
  
  <p>My problem is that I want a grandchild component to be able to open up my modal.</p>
  
  <p>I know I can do this by passing the state to the child component and then to the grandchild component:
      <code>&lt;PartnersTable showModal={this.showModal} partners={PARTNERS} /&gt;</code></p>
  
  <p>That just seems a bit sloppy to me, but maybe that's just the React way.</p>
  
  <p>Can someone let me know if I'm doing this properly or if there's a cleaner way to do this?</p>
  
  <p>You can view my full app on GitHub: <a href="https://github.com/CCChapel/Thy-Kingdom-Come/blob/master/react.js" rel="nofollow noreferrer">https://github.com/CCChapel/Thy-Kingdom-Come/blob/master/react.js</a></p>
  
  <p>Thanks!</p>
  
  <p>-Eric</p>