Calculator project and React async behavior difficulty

Tell us what’s happening:
Upon entering any number, any symbol, and any number again, as in a standard basic equation, hitting the equals buttons should, obviously, evaluate the equation and solve it. If you console.log answer it clearly does that fine. The issue here is setState is not behaving synchronously. Instead of the top display showing x+y=z and the bottom display only showing z (the result), as expected, the top shows x+y= and the bottom shows y=.

What is happening is setState isn’t happening inline with the math.evaluate() function, and is just doing whatever, later. Even using callbacks in setState and using this.forceUpdate() in various places in the function isn’t working.

Any ideas on how I can solve this or work around it?

Your code so far

The issue starts at function pushMath at line 202

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36.

Challenge: Build a JavaScript Calculator

Link to the challenge:

I looked for a while and couldn’t come up with anything concrete. However, my guess is that the state is being set correctly in the pushMath function, but then it is being reset to another state elsewhere in the code.

1 Like

You were completely right. In digitControl, after mathWork was called it was not stopped. Math was done, then it continued on in digitControl which was not supposed to happen.

No idea why I didn’t think of that, thank you very much.