FixedStoppableClock.class.jsx

class StoppableClock extends Component {
  constructor(props) {
    super(props);
    this.state = {
      time: new Date().toLocaleTimeString(),
      isRunning: true,
    };
  }
  componentDidMount() {
    this.intervalId = setInterval(() => {
      this.setState({ time: new Date().toLocaleTimeString() });
    }, 1000);
  }
  componentWillUnmount() {
    clearInterval(this.intervalId);
  }
  componentDidUpdate(prevProps, prevState) {
    // Stopping clock
    if (prevState.isRunning && !this.state.isRunning) {
      clearInterval(this.intervalId);
    }
    // Re-starting clock
    if (!prevState.isRunning && this.state.isRunning) {
      this.intervalId = setInterval(() => {
        this.setState({ time: new Date().toLocaleTimeString() });
      }, 1000);
    }
  }
  toggle = () => {
    this.setState(({ isRunning }) => ({ isRunning: !isRunning }));
  }
  render() {
    const { className, style } = this.props;
    const { time } = this.state;
    return (
      <div className={clsx('StoppableClock', className)} style={style}>
        <span className="StoppableClock-time">{time}</span>
        <button className="StoppableClock-button" onClick={this.toggle}>Toggle</button>
      </div>
    );
  }
}