Week-11- clock- with react

src/App.js

@@ -3,58 +3,59 @@ import logo from './logo.svg';
 import './App.css';
 
 
-// @see https://reactjs.org/docs/rendering-elements.html#updating-the-rendered-element
-class Clock extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {date: new Date()};
+class Clock extends React.component{
+  constructor(){
+    super(props)
+
+   this.state = {
+     displayTime:''
+   }
+
   }
 
-  componentDidMount() {
-    this.timerID = setInterval(
-      () => this.tick(),
-      1000
-    );
+  componentDidMount (){
+    this.timerId = setInterval(()=>{
+      this.tick()
+    }, 1000)
   }
+
+  tick (){
 
-  tick() {
     this.setState({
-      date: new Date()
-    });
+      displayTime: "9:05PM"
+    })
   }
 
-  render() {
+
+  render () {
+    const dispayTime = this.state.displayTime;
+
+
     return (
-      <div>
-        <h1>Hello, world!</h1>
-        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
+      <div className="Clock">
+        <h2>this is {displayTime}</h2>
+
       </div>
-    );
+
+    )
+
   }
 }
 
-// @see https://reactjs.org/docs/create-a-new-react-app.html
-function App() {
-  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. Ok.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-      // See https://reactjs.org/docs/rendering-elements.html#updating-the-rendered-element
-      <Clock date={new Date()} />,
-    </div>
-  );
-}
 
+function App(){
+  return ( 
+  <div className="App">
+    <header className="App-header">
+    <img scr={logo} className="" alt="logo" />
+    </header>
+    <Clock/>
+  </div>
+
+
+
+
+)
+
+}
 export default App;

src/clock.js

@@ -0,0 +1,58 @@
+
+import React from 'react'
+class Clock extends React.component{
+     constructor(){
+       super(props)
+
+      this.state = {
+        displayTime:''
+      }
+
+     }
+
+     componentDidMount (){
+       this.timerId = setInterval(()=>{
+         this.tick()
+       }, 1000)
+     }
+
+     tick (){
+
+       this.setState({
+         displayTime: "9:05PM"
+       })
+     }
+
+
+     render () {
+       const dispayTime = this.state.displayTime;
+
+
+       return (
+         <div className="Clock">
+           <h2>this is {displayTime}</h2>
+
+         </div>
+
+       )
+
+     }
+   }
+
+
+   function App(){
+     return ( 
+     <div className="App">
+       <header className="App-header">
+       <img scr={logo} className="" alt="logo" />
+       </header>
+       <Clock/>
+     </div>
+
+
+
+
+   )
+
+   }
+export default Clock