adding clock component refactoring logic

src/App.jsx

@@ -1,37 +1,16 @@
 import logo from "/logo.png";
 import "./App.css";
-
-// import required React hooks for this component, useState will implement state, where as useEffect facilitates implementation of LifeCycle methods
-import { useState, useEffect } from "react";
+import Clock from "./Clock";
 
 function App() {
-  // Initialise Component state to contain a "date" attribute with current date using the useState method.
-  const [date, setDate] = useState(new Date());
-
-  useEffect(() => {
-    // useEffect implementation to execute code when the component loads
-    // Set date value in state every second to current date and time
-    // Save setInterval timerId in a variable for teardown later in the useEffect method
-    const timerId = setInterval(() => {
-      setDate(new Date());
-    }, 1000);
-
-    // useEffect implemenation to tear down the interval saved in timerId
-    return () => {
-      // Teardown setInterval timer saved within the timerId variable
-      clearInterval(timerId);
-    };
-  });
-
   return (
     <>
       <div>
         <img src={logo} className="logo" alt="Rocket logo" />
       </div>
       <h1>World Clock</h1>
       <div className="card">
-        {/* Render date value that is stored in state */}
-        <p>{date.toString()}</p>
+        <Clock />
       </div>
     </>
   );

src/Clock.jsx

@@ -0,0 +1,27 @@
+// import required React hooks for this component, useState will implement state, where as useEffect facilitates implementation of LifeCycle methods
+import { useState, useEffect } from "react";
+
+export default function Clock(props) {
+  // Initialise Component state to contain a "date" attribute with current date using the useState method.
+  const [date, setDate] = useState(new Date());
+
+  useEffect(() => {
+    // useEffect implementation to execute code when the component loads
+    // Set date value in state every second to current date and time
+    // Save setInterval timerId in a variable for teardown later in the useEffect method
+    const timerId = setInterval(() => {
+      setDate(new Date());
+    }, 1000);
+
+    // useEffect implemenation to tear down the interval saved in timerId
+    return () => {
+      // Teardown setInterval timer saved within the timerId variable
+      clearInterval(timerId);
+    };
+  });
+
+  return (
+    // Render date value that is stored in state
+    <p>{date.toString()}</p>
+  );
+}