How to make digital clock in react js

In this article,we are going to make custom digital clock with moment js .this code is divided into two sections ,one is myClock and other is index.js

myClock.js file is displayed below:

1import React from "react";
2export default class Myclock extends React.Component {
3  constructor(props) {
4    super(props);
5    this.state = {
6      hours: this.props.rawTime.split(":")[0],
7      minutes: this.props.rawTime.split(":")[1],
8      seconds: this.props.rawTime.split(":")[2],
9      half: this.props.rawTime.split(" ")[1],
10      hourRotation: 0,
11      minuteRotation: 0,
12      secondRotation: 0
13    };
14  }
15  componentWillMount() {
16    this.intervalID = setInterval(() => this.updateTime(), 1000);
17  }
18  componentWillUnmount() {
19    clearInterval(this.intervalID);
20  }
21  updateTime() {
22    this.setState({
23      hours: this.props.rawTime.split(":")[0],
24      minutes: this.props.rawTime.split(":")[1],
25      seconds: this.props.rawTime.split(":")[2],
26      half: this.props.time.split(" ")[1]
27    });
28  }
29
30  render() {
31    console.log("kokoko", this.props.rawTime.split(" ")[1]);
32
33    return (
34      <>
35        <div class="container">
36          <h1 id="headline">Moiz </h1>
37          <div id="countdown">
38            <ul>
39              <li>
40                <span id="days"></span>days
41              </li>
42              <li>
43                <span id="hours"></span>
44                {this.state.hours}
45              </li>
46              <li>
47                <span id="minutes"></span>
48                {this.state.minutes}
49              </li>
50              <li>
51                <span id="seconds"></span>
52                {this.state.seconds}
53              </li>
54              <li>
55                <span id="seconds"></span>
56                {this.state.half}
57              </li>
58            </ul>
59          </div>
60        </div>
61      </>
62    );
63  }
64}

index.js file is displayed below

1import React, { Component } from "react";
2import ReactDOM from "react-dom";
3import moment from "moment";
4import Myclock from "./Myclock"
5
6import "./styles.css";
7
8export default class App extends Component {
9  constructor(props) {
10    super(props);
11
12    this.state = {
13      time: moment().format("LTS"),
14      rawTime: moment()
15        .format("LTS")
16        .replace(" PM", "")
17        .replace(" AM", "")
18    };
19  }
20
21  componentWillMount() {
22    this.intervalID = setInterval(() => this.tick(), 1000);
23  }
24  componentWillUnmount() {
25    clearInterval(this.intervalID);
26  }
27
28  tick() {
29    this.setState({
30      time: moment().format("LTS"),
31      rawTime: moment()
32        .format("LTS")
33        .replace(" PM", "")
34        .replace(" AM", "")
35    });
36  }
37
38  render() {
39    return (
40      <div className="App">
41        <Myclock time={this.state.time} rawTime={this.state.rawTime} />
42        <br />
43        <br />
44        <br />
45       
46      </div>
47    );
48  }
49}
50
51const rootElement = document.getElementById("root");
52ReactDOM.render(<App />, rootElement);

Here is the link of live example which we done so far:
Click here