ReactJS: Trigger event from child in parent component

Question

i have two components: 1.Parent 2.Child there is an event in child component called onChange() which return a value. i want to receive the value which was returned from OnChange() in componentDidMount() in parent component.

Example:

class Parent extends PureComponent {
componentDidMount() {
 let value = CHILD.onChange(); //triggered when ever onChange() 
}
 render(){
      return(
        <Child />
)
  }
}
const Child = () => {

  const onChange = () => {
    const value = 1
    return value;
  };
}

You need to define the onChange() method in your Parent and then pass it as a prop in your Child component and execute it there. The value can be saved in the state of the Parent component. — Akshit Mehra
– Akshit Mehra, Commented Dec 25, 2019 at 9:41
You should define the onChange handler on the Parent component and pass over it to the Child component as a prop. In the child component, you receive the handler and set it to the appropriate event. — freedev111
– freedev111, Commented Dec 25, 2019 at 9:42

Oner T. · Accepted Answer · 2019-12-25 09:42:47Z

1

class Parent extends PureComponent {


handleChildChange = value => {
 //Do your stuff with value, pass it to the state and take it from there if you like
}


 render(){
      return(
        <Child handleChange={this.handleChildChange} />
)
  }
}
const Child = (props) => {

  const onChange = () => {
    value = 1
    props.handleChange(value);
    }
  };
}

answered Dec 25, 2019 at 9:42

Oner T.

4131 gold badge8 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ReactJS: Trigger event from child in parent component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related