Q:

How to reset the timer properly in react js

Consider the following component:
import React from 'react';

export default class HeartBeat extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      timeRemaining: 15 * 60,
      timeBeforeWarning: (15 * 60) - 300,
      showWarning: false,
      showError: false,
    };

    this.currentTick = 0;
    this.intervalId  = null;
  }

  componentDidMount() {
    this.intervalId = setInterval(this.updateTick.bind(this), 6000)
  }

  updateTick() {
    if (this.currentTick < 600) {
      this.currentTick += 60;
    } else if (this.currentTick > 540 && this.currentTick < 900) {
      if (!this.state.showWarning) {
        this.setState({
          showWarning: true,
        });
      }

      this.currentTick += 60;
    } else if (this.currentTick === 900) {
      this.setState({
        showWarning: false,
        showError: true,
      });

      clearInterval(this.intervalId);
    }

    console.log(this.currentTick);
  }

  resetTimmer() {
    this.intervalId = 0;

    this.setState({
      showWarning: false,
    });
  }

  render() {
    if (this.state.showWarning) {
      return (
        <div className="alert alert-warning">Your session is about to expire in 5 minutes <a href="#" onClick={this.resetTimmer.bind(this)}>Click me to stay logged in</a></div>
      )
    }

    if (this.state.showError) {
      return (
        <div className="alert alert-danger">Your session expired.</div>
      )
    }

    return null;
  }
}

The idea here is simple: Every 6 seconds increment the currentTick by 60. if that value is greater then 540 but less then 900 then show a warning. If its 900, show an error. If they click on the link in the warning the timer should be reset and we should start all over again.
Issues:

I am doing this.intervalId = 0 in the onClick function, which doesn't work. Because it just keep incrementing the existing value. I did try clearInterval(this.intervalId) but that stopped the timer completely. I just want to reset the timer.

The only time I want to stop the timer is if their session actually times out.

The warning seems to show only when the currentTick is 660, which is not whats suppose to happen. Not sure  how to fix that.

The goal:
When the warning shows, we do an ajax call to the server to just essentially ping it to keep the session alive (I use Laravel as the back end) When a successful 200 comes back then we reset the timer. (I know how to do the ajax call, its just for now I have it as a simple event handler to just "reset the timer")
Note: I have set the timer to setInterval(this.updateTick.bind(this), 6000) instead of 60000 for testing purposes. Once I know this works it will be set to 60000.
Can some one tell me how to reset the timer such that it starts all over again and if I have placed the logic for the timer in the right place?

A:

It's a basic interval which updates the state every minute:
import React from 'react'

class Counter extends React.Component{
    state = {
        timer:  0
    }

    tick = null

    onTick = () => this.setState({timer : this.state.timer + 60})

    componentDidMount(){
        this.tick = setInterval(this.onTick, 60000)
    }

    componentWillUnmount(){
        clearInterval(this.tick)
    }

    render(){
        const { timer} = this.state
        return(
            <div>
                {(timer > 540 && timer <900) && 'Warning'}
                {timer > 900 && 'Error'}
            </div>
        )
    }
}

