Call Function Inside Child Component from the Parent in React

When I first started working with React, one of the challenges I faced was figuring out how to trigger a function in a child component directly from the parent.

This scenario comes up more often than you’d expect. For example, imagine a dashboard where a parent has a button to refresh reports, but the actual refresh logic lives inside the child component.

In this tutorial, I’ll show you two practical methods I use to handle this in React. Both are simple once you see them in action, and I’ll walk you through full code examples.

Table of Contents

Methods to Call a Function Inside a Child Component in React

Now, I will explain to you the methods to call a function inside a child component.

Method 1 – Use Props to Pass Parent Function

The easiest way is to pass a function from the parent down to the child as a prop. The child can then call this function whenever needed.

Here’s the complete code:

import React from "react";

function Child({ onRefresh }) {
  return (
    <div>
      <h2>Sales Report</h2>
      <button onClick={onRefresh}>Refresh from Child</button>
    </div>
  );
}

function App() {
  const handleRefresh = () => {
    alert("Refreshing report data from Parent!");
  };

  return (
    <div>
      <h1>Company Dashboard</h1>
      <Child onRefresh={handleRefresh} />
    </div>
  );
}

export default App;

You can see the output in the screenshot below.

Call Function Inside Child Component from the Parent in React

In this example, the parent (App) defines handleRefresh and passes it down as onRefresh. The child simply calls it when the button is clicked. This method is best when the parent owns the logic and the child just needs to trigger it.

Method 2 – Use Refs and useImperativeHandle

Sometimes, the function belongs inside the child, but we want the parent to be able to trigger it. In that case, we can use forwardRef and useImperativeHandle.

Here’s the complete code:

import React, { useRef, forwardRef, useImperativeHandle } from "react";

const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    generateReport() {
      alert("Report generated inside Child!");
    }
  }));

  return (
    <div>
      <h2>Child Component</h2>
      <p>Report generation logic lives here.</p>
    </div>
  );
});

function App() {
  const childRef = useRef();

  const handleClick = () => {
    childRef.current.generateReport();
  };

  return (
    <div>
      <h1>Parent Dashboard</h1>
      <button onClick={handleClick}>Generate Report from Parent</button>
      <Child ref={childRef} />
    </div>
  );
}

export default App;

You can see the output in the screenshot below.

React Call Function Inside Child Component from the Parent

In this example, the child exposes a generateReport function using useImperativeHandle. The parent can then directly call it via a ref. This method is powerful when the logic truly belongs in the child but still needs to be triggered by the parent.

Method 3 – Use Context for Shared Functions

In larger apps, passing props or refs can get messy. A cleaner way is to use React Context to share functions between parent and child.

Here’s the complete code:

import React, { createContext, useContext } from "react";

const ReportContext = createContext();

function Child() {
  const { refreshReport } = useContext(ReportContext);

  return (
    <div>
      <h2>Child Component</h2>
      <button onClick={refreshReport}>Refresh via Context</button>
    </div>
  );
}

function App() {
  const refreshReport = () => {
    alert("Refreshing report via Context!");
  };

  return (
    <ReportContext.Provider value={{ refreshReport }}>
      <div>
        <h1>Parent Dashboard</h1>
        <Child />
      </div>
    </ReportContext.Provider>
  );
}

export default App;

You can see the output in the screenshot below.

Call a Function Inside a Child Component from the Parent in React

Here, the parent provides the refreshReport function through context, and the child consumes it directly. This is especially useful when you have many nested components and want to avoid prop-drilling.

Conclusion

Calling a child function from a parent in React isn’t as tricky as it first seems.

If the function belongs in the parent, pass it down as a prop. If it belongs to the child, use forwardRef and useImperativeHandle. And for larger apps, React Context keeps things clean and scalable.

I’ve used all three approaches in real-world projects, and each has its place. Once you practice them a couple of times, you’ll know exactly which one to reach for in your own apps.