timer.js

import React from "react";
import ReactDOM from "react-dom";

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      timer: 0,
      secondsRemaining: "00",
      minutesRemaining: "00",
      hoursRemaning: "00"
    };
  }
  timerIntervalId = null;

  setDisplayValue = value => (value < 10 ? `0${value}` : value);

  tick() {
    const { timer } = this.state;

    if (timer - 1 <= 0) {
      clearInterval(this.timerIntervalId);
      this.setState({
        secondsRemaining: "00",
        minutesRemaining: "00",
        hoursRemaning: "00",
        timer: 0
      });
      return;
    }
    var hours = parseInt(timer / 3600, 10);
    var minutes = parseInt((timer - hours * 3600) / 60, 10);
    var seconds = parseInt(timer % 60, 10);

    this.setState({
      secondsRemaining: this.setDisplayValue(seconds),
      minutesRemaining: this.setDisplayValue(minutes),
      hoursRemaning: this.setDisplayValue(hours),
      timer: timer - 1
    });
  }

  componentDidMount() {
    const { minutes, seconds, hours } = this.props;
    const timer = minutes * 60 + hours * 3600 + seconds;
    this.setState(
      {
        timer,
        minutesRemaining: this.setDisplayValue(minutes),
        hoursRemaning: this.setDisplayValue(hours),
        secondsRemaining: this.setDisplayValue(seconds)
      },
      () => (this.timerIntervalId = setInterval(() => this.tick(), 1000))
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerIntervalId);
  }

  render() {
    const { minutesRemaining, secondsRemaining, hoursRemaning } = this.state;

    return (
      <div>
        {hoursRemaning} : {minutesRemaining} : {secondsRemaining}
      </div>
    );
  }
}

ReactDOM.render(
  <Timer hours={1} minutes={12} seconds={23} />,
  document.getElementById("root")
);