Q:

How to initiate function passed from parent via props from grandparent

I've got a nest of react components (its a modal). 
<Modal> // Grandparent
  <Footer> // Parent
    <Button label="Click Me" clickAction={
      () => {

        /* So what goes here? */

      }
    }/> //Child
  </Footer>
</Modal>

Modal passes all children the close modal function. This function gets passed again to all children of footer.
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) => React.cloneElement(child, {
        closeModal: this.handleClose
      })
    );

    return (
      <footer}>
        {childrenWithProps}
      </footer>
    );
  }
}

The internals of the button class look like this:
  constructor(props) {
    super(props);

    this.click = this.click.bind(this);
  }

  click() {
    this.props.clickAction();
  }

  render() {

    return <a
      href='#'
      onClick={this.click}
    >
      {this.props.label}
    </a>
  }

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. 
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.
Any suggestions?

A:

Ah figured out the problem. The arrow functions didn't have 'this' bound. 
<Button label="Click Me" clickAction={
  // Nope
  // () => {this.closeModal()}

  // Yup
  function(){this.closeModal()}
}/>

