Help me count down react js

1

i am seeing wired flickering on the numbers while decreasing when the state changes after first or second loop when click start it will decrease number from 60 to 0 when it reach to 60 zero it will decrease 25 to 24 continues this but after two or three loops start to flicker
here the code

class Why extends React.Component {
    constructor(props){
        super(props)
      this.state={minutes:25,seconds:60}
      this.starttimer=this.starttimer.bind(this)
}
starttimer=(event)=>{
  let sec=this.state.seconds
  let min=this.state.minutes
  setInterval((event) => {
    if(sec!==0){
      this.setState({seconds:sec--})
    }
    if(sec===0)
    { 
      this.setState({minutes:min-1});
      this.setState({seconds:60})
      this.starttimer()
    
    }
  
  }, 1000);
  
}

  render(){
    return(
      <div >
        <div class='row'>
       <div class='col-md-6'><h1 class='text-center'>{this.state.minutes}:{this.state.seconds}</h1></div> 
     </div>
     <div class='row'>
       <div class='col-md-6'><button class='text-center' onClick={this.starttimer}>start</button></div> 
     </div>
      </div>
    )
  }

see it on code pen


do i have to use react life-cycle…how

2

Ok, couple remarks:

  1. You don’t need to bind method if you define it with arrow function in a class
  2. Try to setState of minutes and seconds in one call:
this.setState({ minutes: min, seconds: sec });
  1. It looks like you re-inventing a clock. JavaScript has very solid understanding what time is. You can define time in ms and then display it with Date object