React Pomodoro Clock: Triggering the countdown help

Hi all, needed some help with building the Pomodoro application. I’m using React and Moment.js to handle the countdown and updating the page with a new time value. For the last couple of days, I’ve been struggling with figuring out how to successfully update the page without running into numerous errors.
I have this class component, called Timer, with a method called startTimer and a comopentDidUpdate method that calls startTimer if the prop timerStatus is set to true. In the startTimer method, I have a setInterval method which basically takes the duration of time selected by the user, and subtracts it by one second every second. Whenever I trigger the countdown, the timer starts behaving veyr strangely. If I start at 25 minutes, it will go from 24:59 to 24:59 back to 24:59 very quickly, and it seems like it’s not really following the rules of setInterval. Does anyone have any insight or a suggested fix? Here’s my code below:

import React, { Component } from "react";

var moment = require('moment');
moment().format();

class Timer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      time: 0
    }
    this.startTimer = this.startTimer.bind(this)
  }

  startTimer = () => {
    const currentTime = moment().valueOf()
    let workTime = this.props.workTime * 60000
    const timeDone = currentTime + workTime
    const diffTime = timeDone - currentTime
    let duration = moment.duration(workTime, 'milliseconds')
    const interval = 1000
    let newTime;

        const workTimeLimit = setInterval(() => {
            if (duration <= 0) {
                return clearInterval(workTimeLimit)
            }
            duration = moment.duration(duration.asSeconds() - 1, 'seconds')
            let minutes = duration.minutes()
            let seconds = duration.seconds()
            if (duration.hours() == 1) {
                minutes = minutes + 60
            }
            if (String(duration.seconds()).length == 1) {
              seconds = "0" + seconds
            }
            console.log(minutes + ':' + seconds)
            newTime = minutes + ":" + seconds
            return this.setState({time: newTime})
    }, interval)
  }

  componentDidUpdate() {
    if (this.props.timerStatus) {
      this.startTimer()
    }
  }

    render() {
    if (!this.props.timerStatus) {
      return (
        <div class="timer__container">
        <p class="timer__display" id="time-left">{this.props.workTime + ":00"}</p>
        </div>
      )
    }
    
    return (
        <div class="timer__container">
            <p className="timer__display" id="time-left" >{this.state.time}</p>
        </div>      
      )
    }

  }

  export default Timer

Your code above is filled with all kinds of errors which you should be seeing in your browser’s console.

Also, it would be much better to use codesandbox.io or Codepen so you can post the entire project for us to be able to to easily.

Hey Randell, here is a codesandbox.io link: https://codesandbox.io/s/serverless-browser-fcgln

Here is my repository as well: https://github.com/lhuddlesto/pomodoro

I haven’t actually seen any errors in my browser console related to the timer component.