Pomodoro timer in React I created a simple Pomodoro timer using React JS.
In my example:  


Timer should count down seconds until it reaches 00:00
Timers should switch between 25 and 5 minutes
Timer should be able to start, stop, and reset


My questions:


how can I improve the switching between the "work" and "relax" modes? Now I use 2 functions for this: toogleWork() and toogleRelax().
my functions for stop, start and reset look very simple and I always think that  there is something missing here...


Thank you for your time and any suggestions you can provide.



class Timer extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      time: props.time,
    }
  }

  format(seconds) {
    let m = Math.floor(seconds % 3600 / 60);
    let s = Math.floor(seconds % 3600 % 60);
    let timeFormated = (m &lt; 10 &amp; '0' : '') + m + ':' + (s &lt; 10 ? '0' : '') + s;
    return timeFormated
  }

  startTimer = () =&gt; this.interval = setInterval(this.countDown, 1000)

  countDown = () =&gt; {
    if (this.state.time !== 0) { 
      this.setState(prevState =&gt; ({time: prevState.time - 1}))
    } else {
      this.stopTimer()
    }
  }

  stopTimer = () =&gt; clearInterval(this.interval)

  resetTime = () =&gt; {
    this.stopTimer()
    this.setState({time: this.props.time})
  }
  
  componentWillUnmount() {
    clearInterval(this.interval)
  }

  render() {
    return (
      &lt;div &gt;
        &lt;div className='time'&gt;{this.format(this.state.time)}&lt;/div&gt;
        &lt;button onClick={this.startTimer}&gt;Start&lt;/button&gt;
        &lt;button onClick={this.stopTimer}&gt;Stop&lt;/button&gt;
        &lt;button onClick={this.resetTime}&gt;Reset&lt;/button&gt;
      &lt;/div&gt;
    );
  }
}

class App extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      work: true,
    }
  }

  toogleWork = () =&gt; this.setState({work: true})

  toogleRelax = () =&gt; this.setState({work: false})

  render() {
    return (
      &lt;div className='App'&gt;
        &lt;button onClick={this.toogleWork}&gt;Work&lt;/button&gt;
        &lt;button onClick={this.toogleRelax}&gt;Relax&lt;/button&gt;
        {this.state.work &amp;&amp; &lt;Timer time={1500} /&gt;}
        {!this.state.work &amp;&amp; &lt;Timer time={300} /&gt;}
      &lt;/div&gt;
    )
  }
}

ReactDOM.render(
  &lt;App /&gt;,
  document.getElementById('root')
)
.App {
  text-align: center;
}

button {
  margin: 15px 5px;
  padding: 10px;
  border: none;
}

.time {
  font-size: 32px;
}
&lt;script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"&gt;&lt;/script&gt;
&lt;script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"&gt;&lt;/script&gt;
&lt;div id="root"&gt;&lt;/div&gt;
You can replace


&lt;button onClick={this.toogleWork}&gt;Work&lt;/button&gt;
&lt;button onClick={this.toogleRelax}&gt;Relax&lt;/button&gt;



with

&lt;button onClick={this.toggleState}&gt;{this.state.work? 'Relax' : 'Work'}&lt;/button&gt;;


and


toogleWork = () =&gt; this.setState({work: true})
toogleRelax = () =&gt; this.setState({work: false})



with

toggleState = () =&gt; this.setState(prevState =&gt; ({work: !prevState.work}));