25 + 5 Clock can't pass one test

[wadepronine]

Tell us what’s happening:
Hello, i cant pass one test in this challenge, i know im just newbie in react, and my code looks terrible, but i still cant understand why i cant pass this, can someone explain what im doing wrong? Thank you.

Your code so far

25+5 Clock

Your browser information:

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

Challenge: Build a 25 + 5 Clock

Link to the challenge:

freeCodeCamp.org

[twotani]

Most likely the cause is the timing issue. You’re mixing React and non-React coding style. You are using React-style of coding with the [display, setDisplay] state updating, but all other parts are non-React style using DOM access.
For example, with this code

. . .
 setDisplay('Session')
 minutes = document.getElementById('session-length').innerText
 seconds = '00'
 document.getElementById('time-left').innerText = minutes + ':' + seconds
. . .

you’re mixing setDisplay (React style) and …innerText = … (pure JS DOM access). The hook setDisplay is asynchronous. You don’t know the exact timing of when the display gets updated. So the clock’s time gets updated while there could be lag in updating the label.

Since most of your code is essentially non-React, you can remove React part and implement the program using pure JS with DOM (i.e., change setDisplay to getElementById(…) ). This may be the quickest route for you to pass the FCC tests.

If you want to go with React, then I suggest you eliminate all non-React DOM access and make the code fully React. And if you want functional React with hooks, then you need to use useEffect to update the display based on time left. Instead of keeping track of minutes and seconds, track the time left in seconds. This make the program logic much simpler to manage. You need to use useEffect to ensure the time left is fully updated before changing the display, something like

useEffect(() => {
    if (timeLeft < 0) {
      switchClock()
    } else {
      updateDisplay()
    }
  }, [timeLeft]
)

switchClock switches the clock type between Session and Break. updateDisplay will convert the time left seconds into the display string form MM:SS.

Use useRef to hold a reference to beep (for DOM access) and a reference to timer (setInterval object).

Finally, I noticed a buggy behavior. I was able to update the break or session length while the clock is running. But the only thing you should be able to click when the clock Is running is the Reset button.

[wadepronine]

Hello! Thank you for best explanation and detailed answer, i guess i need to learn React once more, i feel like i can understand only how to work state hooks, rest is still hard for me. Tried to change display hooks to getElementById(…) and still this one test not passing Also fixed bug with buttons when timer is working! Its good feeling when i got so much of your time to solve my problem!