How to Call the Child Function From the Parent Component in React

1. Introduction to ref in React
2. Use ref to Invoke Child Function From Parent in Class Components
3. Use Hooks to Invoke Child Function From Parent in Functional Components

In this article, we will learn to call the method of the child component to the parent component in React.

Mostly, developers need to call the method of the parent component from the child component, and we can achieve that by passing the parent component method as a props to the child component.

We can also reverse it. And here, we will use refs to call the child component’s method from the parent.

Introduction to ref in React

Generally, we can interact with the child component from the parent component by passing the props to the child component. The ref allows us to interact with the component outside the typical parent and child data flow.

Users can follow the below syntax to create the ref.

this.newRef = React.createRef();

After creating the ref, users can assign it as a value of the ref attribute of any HTML element or component. We want to assign it to the Child component’s ref attribute.

<Child ref={this.newRef} />

Now, users can access the mounted instance of the child component via the current attribute of the newRef and invoke the child component’s methods.

this.childRef.current.childMethod();

So, this way, ref is useful for interacting with any component outside the typical data flow.

Use ref to Invoke Child Function From Parent in Class Components

In the example below, we have created two components, the App (parent) and the Child. In the Child component, we have added some HTML to render and childMethod(), which will show an alert box when it invokes.

In the App component, we have created the ref in the constructor and assigned its value to the Child component’s ref attribute.

When a user clicks on the click button, it will invoke the callChild() method. The callChild() method access and invoke the childMethod() via the current attribute of ref.

Example Code:

//  import required libraries
import React from "react";
import Child from "./Child";

export default class APP extends React.Component {
  constructor(props) {
    super(props);
    // Initializing the Refs
    this.childRef = React.createRef();
  }
  //  call the child method
  callChild = () => {
    this.childRef.current.childMethod();
  };

  render() {
    return (
      <div>
        {/* Passing Ref to CHild component */}
        <Child ref={this.childRef} />
        <button onClick={this.callChild}>Click</button>
      </div>
    );
  }
}

import React from "react";
export default class Child extends React.Component {
    childMethod() {
        alert('Called the Method of Child.');
    }
    render() {
        return <h1>This is From Child Component.</h1>;
    }
}

Output:

Use Hooks to Invoke Child Function From Parent in Functional Components

In the example below, we have created the two function components, App and Child. We have wrapped the Child component inside the forwardRef hooks to access the Child component inside the parent component using the useRef hook.

Also, we have used the useImperativeHandle and passed the ref as the first parameter and a callback function as a second parameter. Here, the Child component will extend whatever callback function will return.

We can access the returned value from the callback function in the parent component via the current attribute of the useRef hook.

Example Code - (App.js):

//  import required libraries
import React, { useRef } from "react";
import Child from "./Child";

export default function APP() {
  // use hooks to create `ref`
  const childRef = useRef();
  // call child method
  const onClick = () => {
    childRef.current.childMethod();
  };
  return (
    <div>
      {/* Passing Ref to CHild component */}
      {/* use `refs` */}
      <Child ref={childRef} />
      <button onClick={onClick}>Click</button>
    </div>
  );
}

Example Code - (Child.js):

import React, { forwardRef, useImperativeHandle } from "react";
// While using the hooks, it is required to wrap the component inside the forwardRef to gain access to the ref object,
//, which we create using the `useref` hooks inside the parent component.
const Child = forwardRef((props, ref) => {
  // Extending the child component with the return value of the callback function passed as a second parameter of the useImperatuveHandle.
  useImperativeHandle(ref, () => ({
    childMethod() {
      alert("Called the Method of Child.");
    },
  }));

  return <h1>Use Refs in functional component.</h1>;
});
export default Child;

Output:

We have learned to invoke the child function from the parent function using ref. Also, users can make changes to the child component via the parent component using the ref.