How To Update State In Parent Component From Child Component In React Native?

Question

Current Code

Parent.js

export default class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nickname: 'parent'
    };
  }
}

Child.js

export default class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      nickname: props.navigation.state.params.nickname
    };
  }

  onPressUpdate() {
    const { nickname } = 'Child';
      this.props.navigation.navigate('Parent', { nickname: nickname });
  }
}

What I'm Trying To Do

Parent.js displays nickname and it is edited in Child.js. Finishing to edit nickname, navigation goes back to Parent.js. Then I wanna display a new nickname, 'Child' in above code. I would appreciate it if you could give me any advices:)

Answer 1

You could use componentDidUpdate in parent code.

Something like this:

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.nickname !== prevProps.nickname ) {
    this.seteState({nickname:this.props.nickname});
  }
}

When you navigate from child to parent, pass the nickname to update, it will work and setState to new one.