Please could someone assist me ? My 25 + 5 clock has the issue, that when you click the break-length increment icon or the break-length decrement icon, any change in break-length won’t show in the break-length. However, if you click the Session-length increment or decrement icon, immediately after clicking the break-length increment or decrement icon, the changes that should have occurred in the break length would now reflect.
To illustrate further, if the break-length is 5, and you click the break increment icon twice, the new break-length should increment by 2 (2 increments of 1) to 7, but this won’t show in the break-length, until you click the Session-increment or decrement icon, after you clicked the break-increment icon.
I have tried all I can to stop this issue, including using separate flags for the break and the session, but the error still persisted.
You should keep variables in the state and update them using setState.
For example in incBreak() if display message is “Session” update breakMinutes via setState instead of assigning directly and you’ll see that break will increment. Same with other methods.
Thanks immensely for your reply. The problem with your suggestion, is that I initially made breakMinutes and sessionMinutes state variables (and both would increment/decrement, whenever incremented/decremened by setState), but the issue I had was that when they were incremented/decremented by setState and their values equated to the variable this.minutes, which is the displayed minutes , the displayed minutes would differ from the sessionMinutes or breakMinutes by 1. (That was why I changed them from state variables and modified them directly, and the earlier issue started.)
To illustrate my point, try incrementing sessionLength (ie sessionMinutes variable) in the modified codepen below. (I modified the codepen to increment sessionMinutes and breakMinutes by setState.) You will see that it differs from the displayed minutes by 1. The modified codepen: my modified 25 + 5 Clock.
Please could you have a look at it and suggest something I could do to resolve the issue? Thanks and sorry for putting you out.
Sorry, initially it was giving that error, after the modification. However, after I sent the second post, I studied this codepen another 25 + 5 clock project of the same project from someone on the forum, so based on how the author was incrementing the session-length and break-length and all other variables equated to them (they were all state variables and if session-length was incremented in state as : this.state.session-Length - 1, and it was to be equated to tempLength, then the author incremented tempLength in state as tempLength: this.state.session-Length - 1, instead of as tempLength: this.state.sessionLength), so I did something similar for all my related variables and when I ran the program. It worked! I actually coded on Visual studio code, but I sent my code via a codepen pen and first tested it on the pen (when i saved, it updated and that was why you saw the error-free code, by the time you had time to look at it). But I decided to update the Visual studio code, before writing to tell you that I had found a solution, before you now sent your last post.
Thanks a lot, as your advice for me to try using state, pointed me in the right direction.
