25 + 5 Clock Break Session not updating

JavaScript
1

This section of my code is what controls the timer by switching it into break and session time but when the timer hits 0:00 and switches to break session, it fails to switch back to the normal session. the onBreak state fails to update in the set interval code don’t know why… Any help or suggestions?
link to the code: A Pen by Moro Owusu Afriyie (codepen.io)
will do the styling later

  let interval = setInterval(()=>{
      date = new Date().getTime();
      if(date > nextDate){
        setDisplayTime((prev) => {
          if(prev<=0 && onBreak ==="break"){
            setOnBreak("session");
            console.log({onBreak});  // onBreak doesn't update but still get the old value.. don't really understand why any help?
            return breakLength;

          }
          // this side of the code doesn't execute due to the onBreak state not updating
          else if(prev<=0 && onBreak ==="session"){
            setOnBreak("break");
            console.log({onBreak})
            return sessionLength;
          }
          return prev-1;
        });
        nextDate += second;
      }
    },30) //update it every 30 milliseconds
2

Can you please explain me the significance of each of your React hooks

 const [breakLength, setBreakLength] = useState(3);
  const [sessionLength, setSessionLength] = useState(5);
  const [displayTime, setDisplayTime] = useState(5); // 25 minutes
  const [timerOn, setTimerOn] = useState(false);
  const [onBreak, setOnBreak] = useState("break");

So, that I can understand your code better

3

*BreakLength is the time for the Break. Let’s say the amount of break the user should take
*SessionLength is the time the session takes before the pomodoro clock hits the Break time
*Display Time is the time displayed in the pomodoro clock… The 25:00
*TimerOn is used to control the play or pause feature, it’s used to either continue the time or pause the time
*on Break is for determining whether the user is on break or the session time is running…

Hope this helps… I’m even trying to use the useEffect Hook to implement it…

4

don’t worry i have fixed it myself , i used the useEffect Hook. thanks