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:

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.

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.

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 for more info on Date. Put our getTimeString() method underneath the constructor.

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.

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.

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 for another explanation that uses examples in vanilla JS and jQuery, or here 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.

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!

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