Set checkbox to checked based on other inputs values

Question

I want to set the checkbox input to checked if specific inputs is filled with values but with the option to change checkbox to unchecked again.

the business need requires that this checkbox should be set to checked automatically if the user filled the required inputs but with the option to set it back to unchecked if he wants.(user experience stuff)usecase demo

Consider the following code:

     autoAddFinalEvaluation = () => {
      const {channelValue, evaluationValue, txtValue} = this.state;
      if(channelValue !== null && evaluationValue !== null && txtValue !== '') {
        this.setState({
          checked: true
        })
      } 
    }

i updated the state dynamically like this

  autoAddFinalEvaluation = () => {
    const {channelValue, evaluationValue, txtValue} = this.state;
    if(channelValue !== null && evaluationValue !== null && txtValue !== '') {
      this.setState({
        checked: !this.state.checked
      })
    }
  }

now i can set the checkbox normally but still not working as i expect, while filling the 3rd input(text area) the checkbox switches from true to false and vice versa.

Answer 1

I think the problem is "autoAddFinalEvaluation" is executed after you uncheck the checkbox while it should be called only when input changed in what we may call parent field (The field which input causes the checkbox to be checked).