7 Powerful Ways on How to Pass Data from Child to Parent in React

Understanding how to pass data from child to parent in React is crucial for building dynamic and responsive applications. While passing data from parent to child is straightforward using props, the reverse direction requires a bit more work — but it’s simpler than you think!

In this comprehensive guide, we’ll explore 7 effective ways to pass data from child to parent in React, with code examples, use cases, and best practices. Whether you’re a React newbie or sharpening your skills, this guide will clarify everything.

Read about: React Router Tutorial: A Complete Guide to Routing in React

Why Passing Data from Child to Parent in React Matters

React follows a unidirectional data flow, meaning data flows from parent to child. But there are many cases when a child component needs to update the parent state or trigger a function in the parent. For example:

• A form component updating parent with input data.
• A modal notifying the parent it’s closed.
• A child triggering analytics or logging in the parent.

That’s where understanding how to pass data from child to parent in React becomes essential.

7 Ways on How to Pass Data from Child to Parent in React

1. Using Callback Functions (Most Common Method)

This is the most straightforward and React-friendly approach.

Example: How to pass data from child to parent in react

// Parent.js
import React, { useState } from 'react';
import Child from './Child';

function Parent() {
  const [message, setMessage] = useState("");

  const handleData = (childData) => {
    setMessage(childData);
  };

  return (
    <>
      <Child onSendData={handleData} />
      <p>Message from child: {message}</p>
    </>
  );
}

// Child.js
function Child({ onSendData }) {
  return (
    <button onClick={() => onSendData("Hello from Child!")}>
      Send Data to Parent
    </button>
  );
}

// Parent.js
import React, { useState } from 'react';
import Child from './Child';

function Parent() {
  const [message, setMessage] = useState("");

  const handleData = (childData) => {
    setMessage(childData);
  };

  return (
    <>
      <Child onSendData={handleData} />
      <p>Message from child: {message}</p>
    </>
  );
}

// Child.js
function Child({ onSendData }) {
  return (
    <button onClick={() => onSendData("Hello from Child!")}>
      Send Data to Parent
    </button>
  );
}

Why it works:

You pass a function from parent to child, and the child calls it with the data. Clean and idiomatic React.

2. Using Context API (For Deeply Nested Components)

When children are deeply nested, passing callbacks becomes tedious. The React Context API solves this.

Learn more about Context API from the official docs

3. Using Refs (For Accessing Child Component Methods)

In some cases, especially with class components or imperative logic, useRef and forwardRef can allow communication from child to parent.

Example: How to pass data from child to parent in react

const Parent = () => {
  const childRef = useRef();

  const callChild = () => {
    childRef.current.sayHello();
  };

  return (
    <>
      <Child ref={childRef} />
      <button onClick={callChild}>Call Child Method</button>
    </>
  );
};

const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    sayHello() {
      alert("Hello from Child!");
    }
  }));

  return <h1>I'm the child</h1>;
});

const Parent = () => {
  const childRef = useRef();

  const callChild = () => {
    childRef.current.sayHello();
  };

  return (
    <>
      <Child ref={childRef} />
      <button onClick={callChild}>Call Child Method</button>
    </>
  );
};

const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    sayHello() {
      alert("Hello from Child!");
    }
  }));

  return <h1>I'm the child</h1>;
});

4. Using Global State Managers (Redux, Zustand, etc.)

In complex apps, it’s best to manage shared state using libraries like Redux or Zustand.

See Redux Official Docs

5. Using Custom Hooks

Create reusable hooks that both parent and child can use to sync state indirectly.

6. Using Event Emitters (Not Recommended for Most Use Cases)

For non-React events or large apps, you can implement an event bus pattern, but it breaks React’s declarative flow.

7. Using State Lifting with Intermediate Component

You can “lift the state up” to a shared ancestor and pass handlers down to both child and parent siblings.

Pro Tips for Passing Data from Child to Parent

• Stick with callback functions whenever possible. They’re simple and predictable.
• Avoid overusing context or global state for local interactions.
• For large apps, organize your state using folders, reducers, or even Zustand for simplicity.

How to Pass Data from Child to Parent in React: Real-World Scenarios

Form Submission:

Child component gathers data and sends it to the parent for processing.

Modals and Alerts:

Child closes a modal and notifies the parent to update the UI.

Dynamic Rendering:

A child button triggers a parent to render another component or perform side effects.

Common Mistakes to Avoid

• ❌ Mutating state directly in the child.
• ❌ Passing down too many props.
• ❌ Not memoizing callbacks (useCallback) when necessary.

Boost Your React Skills Further

If you’re serious about mastering React, understanding how to pass data from child to parent in React is just one key concept. Explore these helpful resources:

• React Docs – Lifting State Up
• React Patterns
• FreeCodeCamp React Tutorial

Final Thoughts: How to pass data from child to parent in react

Learning how to pass data from child to parent in React unlocks a critical part of component communication. By using callback functions, Context, or global state managers wisely, you can build robust and maintainable applications.

Keep practicing and gradually explore advanced patterns as your app grows.

Frequently Asked Questions