How can you transfer data from a child component to a parent component in react?

We can pass data from child to parent using a callback function passed as a prop from parent to children, this callback will be called to update parent with the data in child component.

Create a callback function in the parent component: This function will be used to update the state of the parent component. In this example, when the button in ChildComponent is clicked, the sendData method is called, which in turn calls the handleData method of ParentComponent (passed down as a prop), updating the state of ParentComponent with the data from ChildComponent

Pass the callback function to the child component as a prop: The child component can then call this function and pass data to it

Difficulty: 5/10

Topics: state lifting, callback props, context

Scenario Questions

0-2 years experience

1
You have a Child component that renders a button. When the button is clicked, the Parent needs to know the click happened. How would you implement this?
2
Suppose the Child component contains a text input and you need to display the entered value in the Parent. Walk me through the steps you'd take.

2-5 years experience

1
We have a form split across several child components, and the Parent must collect all field values to submit. The current design uses callbacks passed down, but the form sometimes loses data after a child re‑renders. What could be causing this and how would you fix it?
2
During a refactor, a child component that used to call a prop function to update the Parent's state started throwing 'undefined is not a function'. What debugging steps would you take and how would you restore the data flow?

5-8 years experience

1
In a large dashboard, dozens of nested child components need to report status updates to a top‑level container. Compare using lifted state via callbacks versus React Context or a state‑management library. Which would you choose and why?
2
You notice that frequent child‑to‑parent callbacks are causing unnecessary re‑renders of the Parent and its siblings, hurting performance. How would you mitigate this while preserving the data flow?

8+ years experience

1
Our legacy codebase relies heavily on prop drilling for child‑to‑parent communication across many layers, making new feature work painful. Propose a migration strategy to a more scalable solution, considering backward compatibility and team adoption.
2
We are planning a micro‑frontend architecture where each micro‑frontend is a React app that needs to send events to a host container. How would you design the communication mechanism, and what trade‑offs does it have compared to traditional prop callbacks?

Follow-up Questions

❓What issues might arise if the callback isn’t memoized?
❓How would you handle multiple sibling components needing the same data?
❓Can you think of a scenario where lifting state would be a bad choice?