How to call parent component method from child component in React?

Question

How to call parent component method from child component in React?

Answer

You pass a callback function from the parent down as a prop.

function Child({ onGreet }) {
  return <button onClick={() => onGreet('Hi from Child!')}>Say Hi</button>;
}

function Parent() {
  const handleGreet = (msg) => alert(msg);
  return <Child onGreet={handleGreet} />;
}

Here’s what happens:

• Parent defines a function handleGreet
• It passes that down to Child as a prop
• Child calls it → parent function executes

This is the core pattern for child → parent communication.

Real-World Example

• A form component notifying parent after submission
• A child input sending updated value upward
• Modal close actions handled by parent

Quick Practice

Create a “FeedbackForm” component that triggers a parent onSubmit when submitted.

Summary

Send a function as a prop to a child → call it inside the child to trigger logic in the parent.