You have a lot going on here and your app state is very complex.
Did you know that clicking +5, the state change doesn’t seem to take effect until the following click? I added a
console.log(this.state.minutes); before and after your setState() and it returned the same response both times (0 for the first click.
Also, you pass the minutes state to
secondsToTime, but your method asks for seconds…
You’ve done an amazing amount of work, but I think it can be simpler.
I recommend having another try at this from a different angle. Consider that the Pomodoro technique is rooted in minutes. Increment and decrement an initialTime state by 1. Also set another state item (timeRemaining?) to be initialTime * 60.
For the countdown and display, you can change timeRemaining to the formatted time. When you start, timeRemaining counts down by one, which should trigger a redraw of the display. Stopping (and not just pausing), should reset to initialTime.
Does that make sense? Only two pieces of “time” state (unless you add the rest timer too). One for the user-selected time (a minutes integer) and one for the time remaining (a seconds integer). timeRemaining is the reactive state that updates on start.
That’s how I did it (though, I used Vue for mine).