Pomodoro Clock with ReactJS


Hey there, just need a little guidance with my project here, I am using reactJs.
Basically the main problem I am experiencing is my increase and decrease components, whenever I push my button to change the value, for some reason it just won’t register. I tried several different ways for the setstate, I am officially stuck, it’s probably a small fix, so if anyone can help me, it would be greatly appreciated.

that’s the link for my codepen where my program is at.


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… secondsToTime(secs)

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). :slight_smile:


Oh for set state when it comes to ReactJs: setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.
at least that’s what facebook says. The way to get around this is after the closing curly bracket for the set state apply: , function(){console.log(this.state.count)}) (don’t forget the comma after the bracket.)

I really appreciate the tip, I do agree my app state is much to large and really needs to be broken down a little more. First time making a project using ReactJs, not to mention I only started coding really for about two months now. As you can see I still got a lot to learn. I realize the bad mistake with the method, I need to review javascript a little more again it seems.
I understand what you mean to a sense, I’ll take your advice and try to implement your idea of making time have three states, it seems like a simpler way than I was heading towards. I really appreciate your input, I’ve been stuck on this program for a while, glad to know someone gave a well thought out response.
Thank you.


Interesting find on apply. I didn’t know that existed. Time for a research. :slight_smile:

Also, you’re doing great for someone that’s only been coding for 2 months. Keep at it because you’ve got an eye for it.