# 1.2 - Clock App

This next time app we're going to make is going to tell us what time it is! So a little bit more complex than a simple timer, but still utilizing many of the same lifestyle methods.

## Component Starter

To start we need to create a `ClockApp.js` file inside of our timer-apps folder. Your timer-apps should look like the following.

```
    └── src
        └── assets
        └── components
                └── apps
                    └── timer-apps
                        └── TimePiecesApp.js
                        └── TimerApp.js 
                        └── ClockApp.js
```

Let's go ahead and get our `ClockApp` file started with the following code:

```javascript
import React, { Component } from 'react';

export default class ClockApp extends Component {
  render() {
    return (
      <div>
        <h1 className="section-title">React Clock</h1>
      </div>
    );
  }
}
```

Next, to get this to display, we need to change our parent component, TimePiecesApp to no longer have CloakApp commented out, so go ahead and make sure that your TimePiecesApp file looks like this.

```javascript
import React from 'react';
import TimerApp from './TimerApp';
import ClockApp from './ClockApp';
// import StopWatchApp from './StopWatchApp'


const TimePiecesApp = () => {
    return (
        <div className="main">
            <div className="mainDiv">
                <TimerApp />
                <hr />
                <ClockApp />
                {/* <hr />
                <StopWatchApp /> */}
            </div>
        </div>
    )
}

export default TimePiecesApp;
```

Now you should see your Clock App h1, to know you've correctly gotten your component to display!

## State Set up

For this app, our goal is to display the current time. To do this, we need to set up our state in this component to be the current time, and then have that time be displayed in our render.

So, the first thing we can do is set up our state to have our current time. As usual, to initiate state, we can do this inside of our constructor. Remember to include `super(props)` inside of your constructor as well. Type the following code at the top of your ClockApp class.

```javascript
constructor(props) {
    super(props);
    var date = this.getTimeString();
    this.state = {
      time: date
    }
  }
```

We also need to define our `getTimeString()`, so underneath our constructor we're going to create a method to get the current time. We can use build in javascript Date, see [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) for more info on Date. Put our `getTimeString()` method underneath the constructor.

```javascript
getTimeString() {
    const date = new Date(Date.now()).toLocaleTimeString();
    return date;
  }
```

So now our state should reflect the current time. But we haven't rendered this to the screen yet, so let's go ahead and add it to our render. See if you can figured out how to add it without looking at the below code. Remember to use this, when needed.

Did you add it successfully? Either way, check out the below code for our render() function, to compare to yours.

```javascript
render() {
    return (
      <div>
        <h1 className="section-title">React Clock</h1>
        <hr className="explanation" />
        <p>{this.state.time}</p>
      </div>
    );
  }
```

## Time Check

Now that we have it rendering the time, do you think this will update to the new time? If you're unsure, watch and see what happens, are the seconds moving?

Why isn't it updating with the time? Think back to our timer app, and remember what we had to do to get the seconds to update every single second. We'll need to do something similar here, to get our clock to update every single second. Just like the simple timer app, we'll need to use `componentDidMount()` to set our interval, and `componentWillUnmount()` to stop the interval when we navigate away or the component is no longer needed.

## componentDidMount

In our `componentDidMount` we need some way to update our time part of our state every second with the current updated time. In the below code, we are ensuring that this happens every one second.

```javascript
componentDidMount() {
    const _this = this;
    this.timer = setInterval(function () {
      var date = _this.getTimeString();
      _this.setState({
        time: date
      })
    }, 1000)
}
```

Notice the first line of `ComponentDidMount()`, why are we creating a new const \_this? Try commenting out the `const _this = this` and using `this` instead of `_this` in the rest of this block of code. It throws an error, and says that `this.getTimeString() is not a function`.

Why does it do this? This is due to scoping in JavaScript. Where we set \_this = this, `this` is in the global scope, but inside of the function(), we now have a local scope, so if we try to use regular `this` inside of the function, it is pointing to the local scope of the function, which is not what we want.

So, to prevent this issue, we set `const _this = this` first, so that we are then able to use the correctly scoped `this` when we need to. See [here](https://javascriptplayground.com/javascript-variable-scope-this/) for another explanation that uses examples in vanilla JS and jQuery, or [here](http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/) for an extremely in depth explanation.

## Check the clock

Now that we have our setInterval with our date, we are correctly able to see a clock that updates!! Now, just like our simple timer app, we need to make sure that when we leave the page, whent the component unmounts, that the setInterval is not still going. So again, we're going to clearInterval in componentWillUnmount.

```javascript
componentWillUnmount() {
    clearInterval(this.timer);
  }
```

And that takes care of our clock app! Hopefully you have a better understanding of some of the lifestyle methods in react, and some more information on this scoping JS. Check your final code against the code below, to ensure that it's all correct. Next up is a stop watch app!

```javascript
import React, { Component } from 'react';

export default class ClockApp extends Component {
  constructor(props) {
    super(props);
    var date = this.getTimeString();
    this.state = {
      time: date
    }
  }
  getTimeString() {
    const date = new Date(Date.now()).toLocaleTimeString();
    return date;
  }
  componentDidMount() {
    const _this = this;
    this.timer = setInterval(function () {
      var date = _this.getTimeString();
      _this.setState({
        time: date
      })
    }, 1000)
  }
  componentWillUnmount() {
    clearInterval(this.timer);
  }
  render() {
    return (
      <div>
        <h1 className="section-title">React Clock</h1>
        <hr className="explanation" />
        <p>{this.state.time}</p>
      </div>
    );
  }
}
```

[Stopwatch App Setup](https://eleven-fifty-academy.gitbook.io/javascript-301-reactfundamentals/part-8-apps/1.0-small-timer-apps/1.3-stop-watch-app)
