How can I trigger an event from a parent ponent when its child ponent's state holds a certain value?

For example: say I have a Parent ponent and a Child ponent, where the parent's state has the property activeIndex and the child's state has the property activeTask.

I want to trigger the parent's props.handleNextChild method if the child's state's activeTask property equals 3.

How would I do that?

How can I trigger an event from a parent ponent when its child ponent's state holds a certain value?

For example: say I have a Parent ponent and a Child ponent, where the parent's state has the property activeIndex and the child's state has the property activeTask.

I want to trigger the parent's props.handleNextChild method if the child's state's activeTask property equals 3.

How would I do that?

• javascript
• reactjs

Share Improve this question Follow edited Apr 26, 2017 at 4:56 Chris Martin 30.8k1212 gold badges8080 silver badges141141 bronze badges asked Apr 26, 2017 at 3:59 nuT707nuT707 1,57344 gold badges1717 silver badges2828 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Whenever the state or props of your ponent change, the lifecycle method ponentDidUpdate gets called after the update is done, so you could pass handleNextChild as a prop to your child:

class Parent extends Component {
    handleNextChild() {
      //do whatever
    }

    render() {
      return (
        //stuff
        <Child callback={() => handleNextChild()} /> //arrow for lexical bind
        //more stuff
      );
    }
 } 

and change your child ponent class:

class Child extends Component {
  constructor(props) {
    super(props);
    this.callbackHandled = false
  }

  // ...child class code...

  ponentDidUpdate() {
    if (this.state.activeTask === 3) {
    this.callbackHandled = false;
    this.setState({ activeTask: resetValue }, () => {
      if (!this.callbackHandled) {
        this.callbackHandled = true;
        this.props.callback();
      }
    });
  }

  render() {
    // render your child ponent...
  }
}

This will get triggered whenever your state's activeTask property changes to 3. However, as long as activeTask stays at 3, it will run on every update, so if you want it to run only once, be sure to setState to reset activeTask before you call callback as I have done. I have used the callback version of setState and an nstance variable in order to ensure the state gets set before the callback (aka: handleNextChild) is called in order to avoid calling it multiple times, and to ensure that the child gets handled exactly once each time activeTask is set to 3.

There is no straight way to achieve this, create a call back in parent and pass it down to child via props.Then keep checking in the child if the desired condition is met and then trigger the callback.

pseudo code:

Parent

class Parent extends Component {
    handleNextChild = () => {
            // parent logic es here
    }
    render() {
        return (
                <Child handleNextChild = this.handleNextChild />
        );
    }
}

Child:

class Child extends Component {
    onChange = () => {
            if(this.state.activeTask === 3){ 
                this.props.handleNextChild();
            }
    }.....

So I've changed the logic of my app: just set active child index in my json-data and use it as state

@Statements = React.createClass
  displayName: 'Statements'
  getInitialState: ->
    statements: @props.statements
    attempt: @props.attempt
    activeIndex: @props.attempt.active_statement

  updateStates: (data) ->
    @setState activeIndex: data.attempt.active_statement
    @setState attempt: data.attempt
    @setState statements: data.statements