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.timeLeft and 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.
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.
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 setInterval() and 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?