Pass down a function with same name in React

Question

I can passdown props with spread operator. ie,

<Component x={props.x} y={props.y} />

is equal to:

<Component {...props} />

And we can use it in the component definition with the same name.

My question is how can I pass a function like this? What is the equivalent code for below?

<Component handleClick = {this.handleClick} 
   anotherHandleClick = {this.anotherHandleClick}/>

Edit:

Above line will pass down the function handleClick and anotherHandleClick to the child. Is there something like <Component {...Fns} /> so that every function will pass down as props with the same name.

Answer 1

Yes , You can do it like :

1) First way :

render() {
   const methods = { handleClick : this.handleClick };
   return(
        <Component {...methods} />
   )
}

2) Second way :

Without using any extra varible const methods = { handleClick : this.handleClick };

render() {
    return(
        <Component {...this.constructor.prototype} />
        // or
        <Component {...this.__proto__} />
    )
}

NOTE : The second method is not preferable as it gives all the access of class to a child, all means all, constructor, render everything....

I just want to show the ways we can achieve, still if there are lots of functions we can go with second way too, but be careful with that.

---

Here is the working example for both of above, please have a look :

https://stackblitz.com/edit/react-parent-click-prop