PTBC7 Coey's World Clock

src/App.js

@@ -1,20 +1,39 @@
 import React from "react";
 import logo from "./logo.png";
 import "./App.css";
+import Clock from "./Clock.js";
 
 class App extends React.Component {
+  // constructor(props) {
+  //   super(props)};
+  //   // Initialise component state to contain "date" attribute with current date and time
+  //   this.state = { date: new Date() };
+  // }
+  // componentDidMount() {
+  //   // Set date value in state every second to current date and time
+  //   // Save setInterval timer ID in class variable for teardown in another class method
+  //   this.timerId = setInterval(() => {
+  //     this.setState({
+  //       date: new Date(),
+  //     });
+  //   }, 1000);
+  // }
+
+  // componentWillUnmount() {
+  //   // Teardown setInterval timer with timer ID saved as class variable
+  //   clearInterval(this.timerId);
+  // }
   render() {
     return (
       <div className="App">
         <header className="App-header">
           <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
+          <Clock timeZone="America/Los_Angeles" />
+          <Clock timeZone="Europe/London" />
+          <Clock timeZone="Asia/Singapore" />
         </header>
       </div>
     );
   }
 }
-
 export default App;

src/Clock.js

@@ -0,0 +1,36 @@
+import React from "react";
+
+class Clock extends React.Component {
+  constructor(props) {
+    super(props);
+    // Initialise component state to contain "date" attribute with current date and time
+    this.state = { date: new Date() };
+  }
+  componentDidMount() {
+    // Set date value in state every second to current date and time
+    // Save setInterval timer ID in class variable for teardown in another class method
+    this.timerId = setInterval(() => {
+      this.setState({
+        date: new Date(),
+      });
+    }, 1000);
+  }
+
+  componentWillUnmount() {
+    // Teardown setInterval timer with timer ID saved as class variable
+    clearInterval(this.timerId);
+  }
+
+  render() {
+    return (
+      <div>
+        <h1>
+          {`${this.props.timeZone}: ${this.state.date.toLocaleString("en-GB", {
+            timeZone: this.props.timeZone,
+          })}`}
+        </h1>
+      </div>
+    );
+  }
+}
+export default Clock;