I’m currently finishing up the 25 + 5 Clock project, which has been a long and humbling process, and I’m having an issues passing the last two tests. Trying to switch between “Session” timer and “Break” timer isn’t quite right, and doesn’t transition smoothly which I can’t quite wrap my head around.
Issue is coming from switching timer function
function switchTimers() {
beep.current.play()
if (timerDisplay === “Session”) {
setTimerDisplay(“Break”);
setDisplayCount(timers.breakTime * 60);
startStop(“start”, timers.breakTime * 60)
} else if (timerDisplay === “Break”) {
setTimerDisplay(“Session”);
setDisplayCount(timers.sessionTime * 60);
startStop(“start”, timers.sessionTime * 60)
}
}
Link to ongoing project here:
I check for whether the timer is “Session” or “Break” then switch the timer to the opposite one, and that seems to update as the timer successfully switches after the first round, however after the first break length, it reruns the break timer.
Oddly enough when running locally, its actually managed to switch successfully a couple times but not sure why that is.
Is the issue with trying to read “timerDisplay” state then setting it right after? Any suggestions or thoughts on code would be greatly appreciated as well. Sorry still just starting out and trying to figure out React, building projects etc.
Thanks
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:102.0) Gecko/20100101 Firefox/102.0
Challenge: Front End Development Libraries Projects - Build a 25 + 5 Clock
Link to the challenge: