Componentdidupdate Usage And Maximum Update Depth Exceeded

I have a setting screen where I get number of info from user such as age, weight and gender and after this info I am calculating how much water user should drink per day. I would l

Solution 1:

I would avoid componentDidUpdate entirely by doing it when weight, age, or gender changes i.e.

onChange = name = e => {
  this.setState({ [name]: e.target.value }, this.calcSliderValue);
}

calcSliderValue = () => {
  if (all_inputs_are_filled) {
    this.setState({ sliderValue: x });
  }
}

<yourGenderInput onChange={this.onChange('gender')} ... />
<yourAgeInput onChange={this.onChange('age')} ... />

Solution 2:

componentDidUpdate(prevState) { // <===Error

}

The problem is with the first argument in componentDidUpdate is prevProps not prevState

To fix the problem

componentDidUpdate(prevProps, prevState) {
  ...
}

Simply place prevState into second argument