Tell us what’s happening:
I have sent quite a while on the 25 + 5 Clock project, but it isn’t working in a few places and I can’t figure out why.
- I have the decrease and increase session length buttons adding or subtracting from the
state.sessionLength objects, which works… but only after you click it twice. It makes
state.timeLeft always offset from the
sessionLength by one minute.
- I am using the
setInterval() function from React in my
handleStartStop function to decrease
state.timeLeft by 1 each second. But when I hit the button ‘Start/Stop’ button, it doesn’t countdown. I can’t find anything saying I need to import something extra to use this React functionality. Am I missing an import perhaps or what?
handleReset runs when I click my ‘Reset’ button. It used
setState to reset the state object back to its defaults. I have verified that it resets the state object, but then it makes all my other buttons stop working. In the console log it provides an error when I click another button: ‘TypeError: this.setState is not a function…’ as if it can no longer use
this.setState. Why would it do this? In the example pen it seems like this method is all they used to reset the timer.
Your code so far
Your browser information:
User Agent is: Chrome/97.0.4692.99
Challenge: Build a 25 + 5 Clock
Link to the challenge:
The first thing you do in
handleStartStop if the
stopped is return. How is the timer going to run if you return from the function?
That should have been obvious to me. I got rid of the return. Now I got the countdown to start and then stop at zero with
clearInterval(). However, when I click the button again to stop, it doesn’t clear the interval. I used console.log to see if
state.timerStatus was updating accordingly. It is offset for some reason. If I click the Start/Stop button the first time it doesn’t change the
state.timerStatus, but it begins to the second time, but in the opposite way to what it is supposed to. This can make the interval function multiply on itself, making it run multiple times a second if you keep clicking the button.
What is the scope of
Okay, I think what you wanted me to figure out is that I can’t access a function variable the way I was trying to. I found this https://sebhastian.com/setinterval-react/ web page and it helped me understate
clearInterval() a whole lot better. Now my timer counts down.
I was also able to fix session length incrementation buttons by writing my
this.setState() method in a slightly different way. I still don’t understand why the old way wasn’t working, but that’s that.
Now I am trying to implement the break length into the timer. I have
componentDidUpdate() method that adds the
breakLength in seconds to the timeLeft and then calls the
handleStartStop() function which should restart the timer with the new
breakLength time. It doesn’t restart the timer though. Am I calling the
handleStartStop() function wrong, because I have confirmed that the state is being changed, but the function doesn’t seem to start?