Call a Function Inside a Child Component from Parent in React

When I build sales dashboards, I often need a parent screen to tell a child widget to do something. For example, a manager may click Refresh Activities in the dashboard header, while the activity list component needs to reload, clear filters, or scroll back to the newest item.

React normally moves data from parent to child through props. That design works well for most UI updates. But sometimes the parent needs to trigger a specific function that lives inside a child component.

This practical React tutorial shows the cleanest way to call a function inside a child component from a parent, when to use it, and when props provide a better solution.

How Parent-to-Child Function Calls Work in React

A component is a reusable piece of a React user interface. A parent component renders another component, called a child component, inside its JSX.

JSX is the HTML-like syntax that React developers use to describe what appears in the browser. For example, a dashboard parent can render an ActivityList child component.

React uses one-way data flow. A parent sends data down through props, which are read-only values passed into a component. A child sends information back by calling a callback function that the parent passed as a prop.

You can learn more about props in React before using the examples below.

When the parent must directly call a child function, modern React uses two tools:

• forwardRef lets a functional child component receive a ref from its parent.
• useImperativeHandle chooses which child functions the parent can access.

A ref is an object that React keeps between renders without causing another browser render. In this case, the ref gives the parent controlled access to selected child functions.

This pattern is useful when a parent needs to:

• Reset a child form.
• Focus a child input.
• Refresh a local client-side data view.
• Clear filters in an admin portal.
• Scroll a dashboard panel to the latest activity.
• Start or stop a child-controlled animation.

Call a Function Inside a Child Component from Parent

Let’s build a small sales activity dashboard. The parent component contains a button. When a user clicks it, the parent calls the child component’s showLatestActivities() function.

This example assumes a modern React application that uses functional components. If you need help creating one, start with this guide to setting up a ReactJS environment.

Step 1: Create the Child Component

Create a file named ActivityList.jsx. This child component displays sales activities and exposes one function to its parent.

import { forwardRef, useImperativeHandle, useState } from "react";

const ActivityList = forwardRef(function ActivityList(props, ref) {
  const [activities, setActivities] = useState([
    { id: 101, customer: "Olivia Parker", action: "Requested a product demo" },
    { id: 102, customer: "Ethan Miller", action: "Downloaded pricing details" },
    { id: 103, customer: "Sophia Davis", action: "Scheduled a follow-up call" }
  ]);

  function showLatestActivities() {
    const reversedActivities = [...activities].reverse();
    setActivities(reversedActivities);
  }

  useImperativeHandle(ref, function () {
    return {
      showLatestActivities
    };
  });

  return (
    <section>
      <h2>Sales Activities</h2>

      <ul>
        {activities.map(function (activity) {
          return (
            <li key={activity.id}>
              <strong>{activity.customer}</strong>: {activity.action}
            </li>
          );
        })}
      </ul>
    </section>
  );
});

export default ActivityList;

This code uses the useState hook to store the activity array. A hook is a React function that adds features such as state to functional components.

The showLatestActivities() function creates a copied array with [...activities] before calling reverse(). This is an immutable update, which means you create new data instead of changing existing state directly.

The useImperativeHandle hook exposes only showLatestActivities through the ref. The parent cannot access the child’s entire internal state or every function.

Sample output before clicking the parent button:

Sales Activities

Olivia Parker: Requested a product demo
Ethan Miller: Downloaded pricing details
Sophia Davis: Scheduled a follow-up call

Sample output after the parent calls showLatestActivities():

Sales Activities

Sophia Davis: Scheduled a follow-up call
Ethan Miller: Downloaded pricing details
Olivia Parker: Requested a product demo

You can see the output in the screenshot below.

Pro Tip: I’ve found that exposing only the one or two actions a parent truly needs keeps child components easier to reuse. Avoid exposing internal state management functions just because a ref makes it possible.

Step 2: Create the Parent Component

Now create App.jsx. This parent component creates a ref, passes it to ActivityList, and calls the child function through an event handler.

An event handler is a function that React runs after a browser action, such as a click, input change, or form submission. For more examples, see how to handle events in React.

import { useRef } from "react";
import ActivityList from "./ActivityList";

function App() {
  const activityListRef = useRef(null);

  function handleShowLatestClick() {
    activityListRef.current?.showLatestActivities();
  }

  return (
    <main>
      <h1>Sales Activity Dashboard</h1>

      <button onClick={handleShowLatestClick}>
        Show Latest Activities First
      </button>

      <ActivityList ref={activityListRef} />
    </main>
  );
}

export default App;

The useRef hook creates activityListRef. React places the object returned by useImperativeHandle into activityListRef.current after the child mounts.

The optional chaining operator, ?., prevents an error if a user somehow triggers the button before React mounts the child. The button calls the parent event handler, which then calls the child’s exposed function.

Sample output when the page first loads:

Sales Activity Dashboard

[Show Latest Activities First]

Sales Activities
Olivia Parker: Requested a product demo
Ethan Miller: Downloaded pricing details
Sophia Davis: Scheduled a follow-up call

Sample output after clicking “Show Latest Activities First”:

Sales Activity Dashboard

[Show Latest Activities First]

Sales Activities
Sophia Davis: Scheduled a follow-up call
Ethan Miller: Downloaded pricing details
Olivia Parker: Requested a product demo

You can see the output in the screenshot below.

Why Use a Ref for a Child Function?

A parent-to-child function call should remain an exception, not your default React pattern. In most applications, the parent owns the state and sends values down through props.

A ref works best when the child owns a focused UI behavior. For example, the child might control input focus, a local data grid selection, or a scroll position. The parent triggers that behavior without needing to know the child’s implementation details.

The approach above fits a sales activity dashboard because the child owns the activity display. It also fits local frontend tools, admin portals, and reusable UI widgets that manage their own behavior.

For a broader look at component design, see this guide on component-based architecture in React.

Use forwardRef and useImperativeHandle Together

forwardRef passes the ref from the parent into the child. Without it, a regular functional component does not receive a ref parameter.

useImperativeHandle then defines the public API that the parent can call. Think of it as a small, intentional control panel for the child component.

Here is a complete example that adds both a refresh action and a reset action.

import { forwardRef, useImperativeHandle, useState } from "react";

const TicketList = forwardRef(function TicketList(props, ref) {
  const initialTickets = [
    { id: 1, customer: "Liam Johnson", status: "Open" },
    { id: 2, customer: "Emma Wilson", status: "In Progress" },
    { id: 3, customer: "Noah Brown", status: "Resolved" }
  ];

  const [tickets, setTickets] = useState(initialTickets);

  function showNewestFirst() {
    setTickets(function (currentTickets) {
      return [...currentTickets].reverse();
    });
  }

  function resetTicketOrder() {
    setTickets(initialTickets);
  }

  useImperativeHandle(ref, function () {
    return {
      showNewestFirst,
      resetTicketOrder
    };
  });

  return (
    <section>
      <h2>Customer Support Tickets</h2>

      <ul>
        {tickets.map(function (ticket) {
          return (
            <li key={ticket.id}>
              {ticket.customer} — {ticket.status}
            </li>
          );
        })}
      </ul>
    </section>
  );
});

export default TicketList;

import { useRef } from "react";
import TicketList from "./TicketList";

function App() {
  const ticketListRef = useRef(null);

  function handleNewestFirst() {
    ticketListRef.current?.showNewestFirst();
  }

  function handleResetOrder() {
    ticketListRef.current?.resetTicketOrder();
  }

  return (
    <main>
      <h1>Customer Support Dashboard</h1>

      <button onClick={handleNewestFirst}>Show Newest First</button>
      <button onClick={handleResetOrder}>Reset Ticket Order</button>

      <TicketList ref={ticketListRef} />
    </main>
  );
}

export default App;

The child exposes two clearly named actions. The parent only decides when to call them. The child decides how to update its own state.

Sample output when the page loads:

Customer Support Dashboard

[Show Newest First] [Reset Ticket Order]

Customer Support Tickets
Liam Johnson — Open
Emma Wilson — In Progress
Noah Brown — Resolved

Sample output after clicking “Show Newest First”:

Customer Support Dashboard

Customer Support Tickets
Noah Brown — Resolved
Emma Wilson — In Progress
Liam Johnson — Open

You can see the output in the screenshot below.

When Props Are Better Than Child Functions

Use props when the parent owns the decision and the data. This often produces simpler React components because the child receives a value and renders it.

For example, a parent can store a showNewestFirst boolean in state and send it as a prop. The child calculates the display order instead of exposing an imperative function.

import { useState } from "react";

function ActivityList({ showNewestFirst }) {
  const activities = [
    { id: 201, customer: "Ava Thompson", action: "Created a new support ticket" },
    { id: 202, customer: "Mason Harris", action: "Updated account details" },
    { id: 203, customer: "Isabella Moore", action: "Closed a renewal deal" }
  ];

  const displayedActivities = showNewestFirst
    ? [...activities].reverse()
    : activities;

  return (
    <section>
      <h2>Account Activity</h2>

      <ul>
        {displayedActivities.map(function (activity) {
          return (
            <li key={activity.id}>
              {activity.customer}: {activity.action}
            </li>
          );
        })}
      </ul>
    </section>
  );
}

function App() {
  const [showNewestFirst, setShowNewestFirst] = useState(false);

  function handleToggleOrder() {
    setShowNewestFirst(function (currentValue) {
      return !currentValue;
    });
  }

  return (
    <main>
      <h1>Account Activity Dashboard</h1>

      <button onClick={handleToggleOrder}>
        Toggle Latest Activities First
      </button>

      <ActivityList showNewestFirst={showNewestFirst} />
    </main>
  );
}

export default App;

Here, the parent owns the showNewestFirst state. The child receives it through props and creates a derived display array. A derived value comes from existing state or props, so you do not need separate state for it.

This approach works especially well for filtering, sorting, tabs, conditional sections, and API-driven interfaces. You can also review React state management with hooks for more state patterns.

Sample output before clicking the button:

Account Activity Dashboard

[Toggle Latest Activities First]

Account Activity
Ava Thompson: Created a new support ticket
Mason Harris: Updated account details
Isabella Moore: Closed a renewal deal

Sample output after clicking the button:

Account Activity Dashboard

[Toggle Latest Activities First]

Account Activity
Isabella Moore: Closed a renewal deal
Mason Harris: Updated account details
Ava Thompson: Created a new support ticket

Pro Tip: I prefer props for visible UI state, such as sort direction or active filters. I reserve refs for child-only actions like focus, reset, scrolling, or calling a third-party widget API.

Reverse an Array Safely in a React State Array

The JavaScript reverse() method changes the original array. That behavior is called array mutation. It causes trouble when the array belongs to React state because React expects you to replace state with a new value.

Do not write this:

activities.reverse();
setActivities(activities);

This directly changes the existing activities array. React may still render, but shared references and later updates can produce confusing UI behavior.

Instead, make a copy first.

const reversedActivities = [...activities].reverse();
setActivities(reversedActivities);

The spread syntax, ...activities, creates a new top-level array. Then reverse() changes only that copied array. This gives React a new reference and makes the update predictable.

If your project supports it, toReversed() offers a clean alternative. It returns a new array without changing the original one.

const reversedActivities = activities.toReversed();
setActivities(reversedActivities);

For a static array that you only display, calculate the reversed result during rendering. Do not create state that duplicates another value.

function RecentOrders() {
  const orders = [
    { id: "ORD-501", customer: "James Anderson" },
    { id: "ORD-502", customer: "Mia Taylor" },
    { id: "ORD-503", customer: "Benjamin Clark" }
  ];

  const newestOrders = [...orders].reverse();

  return (
    <section>
      <h2>Recent Orders</h2>

      <ul>
        {newestOrders.map(function (order) {
          return (
            <li key={order.id}>
              {order.id} — {order.customer}
            </li>
          );
        })}
      </ul>
    </section>
  );
}

export default RecentOrders;

This component derives the reversed order directly from a fixed array. React renders the newest order first without any state update.

Sample output:

Recent Orders

ORD-503 — Benjamin Clark
ORD-502 — Mia Taylor
ORD-501 — James Anderson

Pro Tip: I’ve found that mutating a state array directly is one of the fastest ways to create confusing React UI bugs. Copy first, then reverse, sort, filter, or update.

Things to Keep in Mind

• Avoid direct state mutation: Never call reverse() directly on a React state array because it changes the current state object.
• Copy before reversing: Use [...items].reverse() to create an immutable array update before setting state.
• Prefer derived values: If a reversed list only changes the display order, calculate it from props or state instead of storing another array.
• Use stable keys: Render each reversed list item with a unique, stable ID rather than its array index.
• Protect API data: Copy API response arrays before reversing so other components do not receive unexpectedly reordered data.
• Avoid needless updates: Do not call setState for a static array when rendering a reversed copy solves the problem.

Frequently Asked Questions

Calling a function inside a child component from a parent in React works well when the child owns a focused UI action. Use forwardRef with useImperativeHandle for those cases, and always create a copy before calling reverse() or use toReversed() when your project supports it. I hope you found this article helpful.

You May Also Like

• How to pass a function to a child component in React
• How React parent and child component communication works
• How to render a React component on button click
• How to prevent unnecessary React component re-renders
• How to fetch API data when it does not display in a React component

Bijay Kumar

Bijay Kumar is an experienced Python and AI professional who enjoys helping developers learn modern technologies through practical tutorials and examples. His expertise includes Python development, Machine Learning, Artificial Intelligence, automation, and data analysis using libraries like Pandas, NumPy, TensorFlow, Matplotlib, SciPy, and Scikit-Learn. At PythonGuides.com, he shares in-depth guides designed for both beginners and experienced developers. More about us.

enjoysharepoint.com/