React Calculator works but doesn't pass CDN tests

Tell us what’s happening:
Describe your issue in detail here.

Hi coders,

I built a calculator in VSCode with the CDN and hand tested all functionality of the automated tests (including edge cases) and my calculator is functioning as the specs ask, but for some reason everything from #8 down (display shows input) fails.

I ported the code to a CodePen to post here and now I’m failing test #7, too…though the functionality has not broken.

At first I thought my issue was with the way I was displaying the information and implemented several different versions of display to no avail (without useEffect, and using an expression inside the div, etc.)…but seeing this new test fail that is clearly working in my VSCode version has me perplexed.

In the description of the failure I noticed it is seeing very different values than what is expected and dug into the dev tools to check if any of my state was mutating but that doesn’t appear to be the case…

I’ve had somewhat similar issues before and disabling my browser extensions fixed the issue–which I also tried here–no luck.

Can someone please point me in the right direction? Everything appears correct / functions as expected.

Thanks!

Your code so far

codepen link: https://codepen.io/luckynumberke7in/pen/ExoBvqy

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:99.0) Gecko/20100101 Firefox/99.0

Challenge: Build a JavaScript Calculator

Link to the challenge:

All the test failures indicate the last keypress is not being recognized or rendered during the tests. My guess is that there are two renders between the last key press and the final DOM version when you check manually, but the tests are checking immediately or after one render and seeing the unfinished DOM. This is probably because of the display update in the useEffect() which I believe gets you an extra render.

Try using a separate display component that takes the appropriate bits of state as props so that everything renders in one render as the state changes.

Not sure if there is an error in your code, but it might be your browser. I just took your pin, submitted it to the test, and it passed all tests 100%. You might want to try a different computer or browser, because you might have some pluggins or something messing it up.