Passing method reference between React Components

We can pass a reference to functions as properties from on components(parent) to children components.

To do that let us first inside our parent component let us define a function called eventHandle that will be called to handle a certain event say a button click somewhere in one of the children components.

function eventHandler(){
   //some code
}

We then pass our eventHandler method to a child component via props as follow

<childComponent
   click={eventHandler}
/>

Now we can use it inside the child component as follows by using the click prop that was passed down from the parent as a prop and set it as a reference to the eventHandler as follows,

<button onClick={click}>Click Me<\button>

This pattern helps us to change state from components that we do not have direct access to the state

Photo by Christopher Gower