What lifecycle method should i use to listen for changes in state and update other state accordingly in react class component

Question

I am working on an app it have an array of data User selects timeSpan like monthly , weekly etc according to that array should be rendered on screen. I tried doing this in componentWillUpdate which i am not sure. But it gave me error.

There is a dropdown from where user selects timespan value. I don't know where should i put this so that it listen for changes in timeSpan Any Help would be great

Here is my code.

if (this.state.timeSpan === "yearly") {
      const yearlyData = this.props.dispensingData.duration["yearly"];
      this.setState({ spanData: yearlyData });
    } else if (this.state.timeSpan === "weekly") {
      const weeklyData = this.props.dispensingData.duration["weekly"];
      this.setState({ spanData: weeklyData });
    } 

Answer 1

You don't need to use setState to pick a particular key from a prop. You should use setState for data that's eg user-entered.

const {timeSpan} = this.state;
let data;
if (timeSpan === "yearly" || timeSpan === "weekly") {
    data = this.props.dispensingData.duration[timeSpan];
}

in eg your render function should be enough for this usecase.

Answer 2

You can use the componentDidUpdate method (docs here: https://fr.reactjs.org/docs/react-component.html#componentdidupdate ),

componentDidUpdate(prevProps, prevState) {
  if (prevState.timespan !== this.state.timespan) {
    if (this.state.timeSpan === "yearly") {
      const yearlyData = this.props.dispensingData.duration["yearly"];
      this.setState({ spanData: yearlyData });
    } else if (this.state.timeSpan === "weekly") {
      const weeklyData = this.props.dispensingData.duration["weekly"];
      this.setState({ spanData: weeklyData });
    } 
  }
}