Challenge implies using anti-pattern which may have unexpected results in real situations

Affected page https://www.freecodecamp.org/learn/front-end-libraries/react/render-conditionally-from-props

The lines 242-246 of the file read:

handleClick() {
  this.setState({
    counter: 0 // Change this line
  });
}

This implies that you can increment counter as follows: counter: this.state.counter + 1. As already taught at this point of the curriculum, this method can result in unexpected behavior, since React may batch state updates for performance reasons. AFAIK, the following is the correct way to handle this situation:

handleClick() {
  this.setState(prevState => ({counter: prevState.counter + 1}))
}

Expected behavior Right now, both methods of incrementing counter are accepted. I suggest we change the provided code and the tests so that only the second method is implied and accepted.

System:

• Device: Laptop
• OS: Ubuntu 20.4
• Browser: Opera
• Version: 76

[lasjorg]

@suburban-daredevil There is already a PR for this which is awaiting requested changes. Let’s give them a chance to change what is needed first. If it does not happen within a reasonable timeframe we can use your PR instead.

[raisedadead]

Hi @soham283 thanks for reaching out and we appreciate your help. We would like you to start here: https://contribute.freecodecamp.org/#/FAQ

Happy contribuitng.