React- How to call a Child Function from Parent Component?

We have a parent component called <Dad/>

And let’s say its child is <Son/>

Now we know if a function callDad() is defined in <Dad/>, it’s child can easily call it if we pass it to the child in props e.g. <Son func={callDad}

However, what about vice-versa? Is it even possible to call a function defined in the Child component (<Son/>) component from the parent component(<Dad/>)?

Yes it is!

1. In the beginning, our components look like this.

const Dad = () => {

function callMyChild() {
//some code here
}

return(
<>
<h1> I'm your Dad! </h1>
<button onClick= {callMyChild}> Call my Son! </button>
</>
)

}

<Dad/> Component

<Son/> Component:

const Son= (props, ref) => {

function HiDad() {
alert("Hi Dad! I'm here!);
}

return(
<>
<h1> I'm the Son! </h1>
</>
)

}

2. Now we want to call that HiDad() function in our parent component.

To achieve this, we will create a reference with the help of React.useRef() and pass it down to the Child Component in ref props.

const Dad = () => {

const childRef = React.useRef();

function callMyChild() {
//some code here
}

return(
<>
<h1> I'm your Dad! </h1>
<button onClick= {callMyChild}> Call my Son! </button>
//ref passed here to child component
<Son ref={childRef}/>

</>
)

}

NOTE: Passing useRef() from one component to another means we can access the functions of the component that we are passing the useRef() towards (i.e, child component)!

3. Now, in Child Component, we make some changes.

a. we wrap that whole component in a react hook called ‘forwardRef()’ so that our parent component can access its functions.

const Son= forwardRef((props,ref) => {

function HiDad() {
alert("Hi Dad! I'm here!);
}

return(
<>
<h1> I'm the Son! </h1>
</>
)

})

b. After this, we make one more change.

All the functions that we want to be called from the parent component (<Dad/>, we wrap them in another react-hook called useImperativeHandle() . This hook takes ‘ref’ from the parent as first argument and the function as the second argument that returns all the functions that we want to expose to the parent component.

and write them without writing the ‘function’ keyword.

The final code in the Child Component looks like this:

const Son= forwardRef((props,ref) => {

React.useImperativeHandle(ref, () => ({
HiDad() {
alert("Hi Dad! I'm here!);
}
//define more functions here..
)})

return(
<>
<h1> I'm the Son! </h1>
</>
)

})

4. Finally, it’s time to access the child component function (that is HiDad() in this case) in the parent component.

NOTE: useRef() gives us an object that has a current property, and inside that current property we have all the functions that are defined in the child towards which that useRef() is passed down.

The final code in the Parent Component looks like this:

const Dad = () => {

const childRef = React.useRef();

function callMyChild() {
childRef.current.HiDad();
}

return(
<>
<h1> I'm your Dad! </h1>
<button onClick= {callMyChild}> Call my Son! </button>
//ref passed here to child component
<Son ref={childRef}/>

</>
)

}

And this is all that it takes!