title: How to initiate function passed from parent via props from grandparent
body: <p>I've got a nest of react components (its a modal). </p>
  
  <pre><code>&lt;Modal&gt; // Grandparent
    &lt;Footer&gt; // Parent
      &lt;Button label="Click Me" clickAction={
        () =&gt; {
  
          /* So what goes here? */
  
        }
      }/&gt; //Child
    &lt;/Footer&gt;
  &lt;/Modal&gt;
  </code></pre>
  
  <p>Modal passes all children the close modal function. This function gets passed again to all children of footer.</p>
  
  <pre><code>export default class Footer extends React.Component {
  
    constructor(props) {
      super(props);
  
      this.handleClose = this.handleClose.bind(this);
    }
    handleClose() {
      this.props.closeModal();
    }
  
    render() {
  
      const childrenWithProps = React.Children.map(this.props.children,
        (child) =&gt; React.cloneElement(child, {
          closeModal: this.handleClose
        })
      );
  
      return (
        &lt;footer}&gt;
          {childrenWithProps}
        &lt;/footer&gt;
      );
    }
  }
  </code></pre>
  
  <p>The internals of the button class look like this:</p>
  
  <pre><code>  constructor(props) {
      super(props);
  
      this.click = this.click.bind(this);
    }
  
    click() {
      this.props.clickAction();
    }
  
  
    render() {
  
      return &lt;a
        href='#'
        onClick={this.click}
      &gt;
        {this.props.label}
      &lt;/a&gt;
    }
  </code></pre>
  
  <p>What I don't want to do is bake the close method right into the button since it's supposed to only have access to it when it's a child of modal footer. </p>
  
  <p>So the thing I'm trying to solve (see the first code block) is what goes in the /* So what goes here? */ area. Using 'this' just returns 'undefined' so I'm having trouble reaching my closeModal method.</p>
  
  <p>Any suggestions?</p>