How to make Analogue clock in react js

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

App.js file is displayed below:

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

Analogue.js file is displayed below

1import React ,{ Component }  from "react";
2 class Analogue extends React.Component {
3  constructor(props)
4  {
5    super(props);
6    this.state = {
7      degreesPerTick: 360 / 60,
8      hour: this.props.rawTime.split(":")[0],
9      minute: this.props.rawTime.split(":")[1],
10      second: this.props.rawTime.split(":")[2],
11      hourRotation: 0,
12      minuteRotation: 0,
13      secondRotation: 0
14    };
15  };
16  componentWillMount() {
17    this.intervalID = setInterval(() => this.updateRotation(), 1000);
18  }
19
20  componentWillUnmount() {
21    clearInterval(this.intervalID);
22  }
23  updateRotation() {
24    this.setState(
25      {
26        hour: this.props.rawTime.split(":")[0],
27        minute: this.props.rawTime.split(":")[1],
28        second: this.props.rawTime.split(":")[2],
29        hourRotation:
30          this.state.hour * this.state.degreesPerTick +
31          this.state.degreesPerTick,
32        minuteRotation:
33          this.state.minute * this.state.degreesPerTick +
34          this.state.degreesPerTick,
35        secondRotation:
36          this.state.second * this.state.degreesPerTick +
37          this.state.degreesPerTick
38      },
39      () => {
40        root.style.setProperty(
41          "--hourRotate",
42          rotate(${this.state.hourRotation}deg)
43        );
44        root.style.setProperty(
45          "--minuteRotate",
46          rotate(${this.state.minuteRotation}deg)
47        );
48        root.style.setProperty(
49          "--secondRotate",
50          rotate(${this.state.secondRotation}deg)
51        );
52      }
53    );
54  }
55  render() {
56    return <>
57    <div className="analog">
58        <div className="analog-housing" />
59        <div className="analog-face">
60          <div className="analog-hands">
61            <div className="analog-hour" />
62            <div className="analog-minute" />
63            <div className="analog-second" />
64          </div>
65          <div className="analog-center" />
66        </div>
67      </div>
68
69    </>;
70  }
71}
72 
73export default Analogue;

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