Start and Stop the Clock

Clock.js

import React from 'react';

export default Clock extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      date: new Date(),
      isClockRunning: true
    }
  }
  
  render() {
    return (
      <div>
        <h2>Hello World, Its { this.state.date.toLocaleString() } </h2>
        <button onClock={ this.toggleState }>{ this.isClockRunning : 'STOP': 'START' }</button>
      </div>
    );
  }

  componentDidMount() {
    this.setTimer();
  }

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

  setTimer() {
    this.timerId = setInterval(() => this.tick(), 1000);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  toggleState = () => {
    this.setState(prevState => {
      prevState.isClockRunning ? clearInterval(this.timerId) : this.setTimer();
      return { isClockRunning: !prevState.isClockRunning };
    });
  }
}