How to call parent method in reactjs?

In ReactJS, child components can invoke parent component methods through props. Parent components can pass a method as a prop to child components, enabling them to call it when necessary. This is one of the common approaches for achieving component communication in React.

Here is a simple example to illustrate this process:

First, consider a parent component with a method handleParentMethod that the child component will invoke.

jsx
class ParentComponent extends React.Component {
  handleParentMethod = () => {
    console.log('Parent component method called!');
  };

  render() {
    return (
      <div>
        <ChildComponent callParentMethod={this.handleParentMethod} />
      </div>
    );
  }
}

In the above code, ParentComponent defines the method handleParentMethod, which is passed as the prop callParentMethod to ChildComponent.

Next, the child component receives callParentMethod as a prop and invokes it when required, such as during a button click event.

jsx
class ChildComponent extends React.Component {
  render() {
    // Destructure the parent component's method from props
    const { callParentMethod } = this.props;

    return (
      <button onClick={callParentMethod}>
        Call Parent Component Method
      </button>
    );
  }
}

In this example, when the user clicks the button, ChildComponent calls callParentMethod, which corresponds to the method handleParentMethod defined in ParentComponent. This results in the console logging 'Parent component method called!'.

This pattern is particularly useful when state management is retained within the parent component, and child components are needed to trigger updates to this state. It exemplifies React's recommended top-down data flow.