[React]Problem with componentDidUpdate[solved]

JavaScript
1

Hi everybody.

I hope everyone is fine.:blush: I am back here because I have a little problem with my componentDidUpdate and, as I am fairly new to React, I don’t understand why (which is a bit annoying for me because I want to understand why. :sweat_smile:)

First here is my componentDidUpdate with the code related to it:

this.state = {
      answerIsCorrect: false,
      answerIsWrong: false,
    };
    this.resetAnswer = this.resetAnswer.bind(this);

  }

isAnswerCorrect(valeurReponse) {
    if(valeurReponse === this.props.evalStatus.test.reponseCorrecte) {
      this.setState({answerIsCorrect: true})
      console.log("Bien joué")
    }
    else {
      this.setState({
      answerIsWrong: true});
      console.log("What ?!")
    }
  }

resetAnswer() {
  if(this.state.answerIsWrong === true) {
  this.setState({
  answerIsWrong: false});

  } else if (this.state.answerIsCorrect === true) {
  this.setState({
  answerIsCorrect: false});
  }
  console.log("Ok", this.state.answerIsCorrect, this.state.answerIsWrong)
}

componentDidUpdate(prevProps, prevState) {
      this.timer = setTimeout((answerIsWrong, answerIsCorrect) => this.resetAnswer(answerIsWrong, answerIsCorrect), 3000);
    }
componentWillUnmount() {
      clearTimeout(this.timer);
    }
render () {
    const{evalStatus, selectTest} = this.props;
const displayReponses = evalStatus.test.reponses.map(reponse =>
    <MDBBtn className='response' key={reponse.id} onClick={() => {
      this.isAnswerCorrect(reponse.reponse); this.chargeReponseClick(reponse.reponse)}}>{reponse.reponse} </MDBBtn>)

And here is a picture of my console.log : 57

So my question is why my componentDidUpdate is rendering two times each time it is working ?

In fact, I am doing a language quiz app and if the user clicks on one of the wrong answers it displays a “X” and if it’s a good answer it displays a “O”. So, I need to make it disappear after a few secondes and if the user clicks on the same button a second time (or on another answer buttons) the “X” or “O” will display again and have to disappear again, etc. So I think I need to use componentDidUpdate in this case.

So how can I solve this issue? Where do I have to start?

I would be very glad if some kind people could give me some idea and thanks everyone for taking time to read me. :blush:

Edit : Problem solved. :blush:

2

Because every time you setState in CDU, you are triggering a new render, hence another CDU, You could try to control it by comparing prevState in CDU, but I avoid setting state in CDU unless I absolutely need to.
Couldn’t you just run your timer and setState right after the user’s click event once ?

3

Thank you very much for your answer. Thanks to your question, I put my timer and setState into a function and I put it on the onClick event and it works. :star_struck:

So problem solved. :blush:

4

yeah, CDU can be very powerful for optimization but you have to be extra careful when setting state in there

5

One question about your business logic:

Why do you have two logical states for answer.
When an answer is correct, then at the same time it can’t be wrong.

6

Thank you for your message.

Yes, I agree with you about when an answer is correct it can’t be wrong. But, I am doing a quiz with multiple answer choices. And I have one component who display a picture if you make a wrong choice and I have another component who display another picture if you choose a right choice. That why I have two logical states. (but maybe my name choices was not very good too)

I also think my code could be improve but as I am a beginner I don’t know how. Moreover, even if I am quite curious about it, I have only until May to finish this application so if things are working without bug, I am happy with it. And I think I will become better if I continue to code and code again.:slightly_smiling_face:

7