How to initiate function passed from parent via props from grandparent - reactjs

Question

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?

Answer 1

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()}
}/>

Answer 2

You might consider only passing props to components that need to use them. In other words, just explicitly pass the closeModal function to your button as a prop:
function Footer (props) {
return (
<footer>{props.children}</footer>
)
}
function Button (props) {
return (
<a href='#' onClick={props.onClick}>{props.label}</a>
)
}
class Modal extends React.Component {
constructor (props) {
super(props)
this.closeModal = this.closeModal.bind(this)
}
closeModal () {
/* implement me */
}
render () {
return (
<div>
<Footer>
<Button label='Click Me' onClick={this.closeModal} />
</Footer>
</div>
)
}
This way, you don't have to think about the context of the button, i.e. which props are being "invisibly" passed to it via a parent pattern like the cloneElement technique you've used. Some components which are children of Footer might not need access to closeModal, so there's no reason to pass it to them.