CODEWITHSUNDEEP
javascriptreactjs
D'Arcy Rail-Ip
D'Arcy Rail-Ip

Reputation: 11955

How can my child component update my parent component in React JS?

My parent component is a list of tabs. Clicking on tab leads me to Child #1 or Child #2. I can also route to Child #1 or Child #2 by URL. In this case, I check the path to know which tab to select programatically.

My problem comes when I redirect from one child to another. My parent is oblivious to the fact that a change has occurred - none of the initializing functions in that component get called, since it is already rendered. Therefore the tab that was originally selected (Child #1) - remains selected even though I am now viewing Child #2.

The tab that is selected is being stored in the parent's state - is there any way for me to update the parent's state from the child component?

Upvotes: 3

Views: 1694

Answers (1)

Eelke
Eelke

Reputation: 2327

Pass a function down to the child(ren) from the parent that modifies the state accordingly. A very simple version could be something like:

class Parent {
  setActive(activeId) {
    this.setState({active: activeId});
  }

  render() {
    return (
      <Child setActive={this.setActive}/>
    );
  }
}

Upvotes: 4

Related Questions