How can I call parent method in a child React component?

by

Try this. Passing the function down as props to the child component.

import Parent from './parent.js';
class Child extends React.Component {
    constructor(props) {
        super(props);
        };

    click = () => {
        this.props.parentMethod();
    }

    render() {
          <div onClick={this.click}>Hello Child</div>
    }
}

class Parent extends React.Component {
    constructor(props) {
        super(props);
        };

    someMethod() {
        console.log('bar');
    }

    render() {
          <Child parentMethod={this.someMethod}>Hello Parent, {this.props.children}</Child>
    }
}

More Related Contents:

  1. Unable to access React instance (this) inside event handler [duplicate]
  2. React: “this” is undefined inside a component function
  3. State not updating when using React state hook within setInterval
  4. “this” is undefined inside map function Reactjs
  5. How do I conditionally add attributes to React components?
  6. React component initialize state from props
  7. How do I test axios in Jest?
  8. Why can’t I update props in react.js?
  9. Intercept/handle browser’s back button in React-router?
  10. How to make a shared state between two react components?
  11. react router doesn’t work in aws s3 bucket
  12. React Routing works in local machine but not Heroku
  13. Rendering React components with promises inside the render method
  14. react useEffect comparing objects
  15. When to use JSX.Element vs ReactNode vs ReactElement?
  16. React useState hook event handler using initial state
  17. Get path params in react-router v4
  18. In reactJS, how to copy text to clipboard?
  19. Unexpected token < error in react router component
  20. Getting an error “A non-serializable value was detected in the state” when using redux toolkit – but NOT with normal redux
  21. React eslint error missing in props validation
  22. useEffect is running twice on mount in React
  23. React – useState – why setTimeout function does not have latest state value?
  24. Matched leaf route at location “/” does not have an element
  25. Simulate a button click in Jest
  26. Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null [closed]
  27. React-Redux: Should all component states be kept in Redux Store
  28. React.js best practice regarding listening to window events from components
  29. how to render child components in react.js recursively
  30. Extending React.js components

Leave a Comment