So right now you might have noticed if you go to your application you have this error. And the reason we have this error is because back in our code we had a function called renderStuff that we got rid of and we need to unbind this we need to not have this bound to our app because it doesn't exist. So go ahead and delete that function and I'll go ahead and delete it again so this.renderStuff = this.renderStuff.bind(this) in our constructor. Go ahead and get rid of that save it and we should be good to go.

So once you get that done to get started let's create a new filing component let's call this Clock.js. Basically, the idea of this component is that it's going to be our clock or birthday countdown clock that has time and says Happy Birthday when it's your birthday. So first thing we need to do is import React and component from react and hopefully, you're getting the hang of this now and we will also need to be using, well we'll talk about that later.

import React, { Component } from 'react';

But for now, let's just go ahead and export before class clock extends Component.

Let's also move this down so export default and let's just put this at the bottom here so export default Clock.

class Clock extends Component {
}

export default Clock;

Then you know our component let's go ahead and type our constructor out and our render function

import React, { Component } from 'react';

class Clock extends Component {

    constructor(props) {
        super(props)
render() { 
 }
}

export default Clock;

okay so now that we have our clock components set up let's go ahead and head over to our Trello board here and this will be in the guide notes below as well. We'll see our countdown wireframe here and it'll say 100 days 10 hours.

That's the idea of the component. Now we all need a couple things. Well, mostly just one thing we'll need. The date that the person submits and if we wanted to we could get the form completed and determine whether or not we want to display this but we're not going to do that this time we're just going to access the date and display that. So let's go ahead and in here we need to access that by typing in this.state = and then we need to set timeRemaining = a blank object.

So that's going to hold our time remaining until it's our birthday and in our render function just go ahead and return, well first let's access our time so that const data = this.state.timeRemaining and then we call that time remaining up here and then return a div with some labels in it that say days and then we can access it by data.days and so on so days, hours, minutes, and seconds.

render() {  
        const data = this.state.timeRemaining

        return (
            <div>
                <div>DAYS {data.days}</div>
                <div>HRS {data.hours}</div>
                <div>MINS {data.minutes}</div>
                <div>SECS {data.seconds}</div>
            </div>
        )

So this isn't going to display anything on the screen for two reasons. One our time remaining is an empty JavaScript object so that's not going to work and 2 we haven't set up our clock in our birthday form. So back in here let's import it

import Clock from './Clock';

and now we can use this. So let's just go ahead and put it right here so Clock

and let's pass in some data here so we want our props to be equal to something like birthday form data or birthdayFormState and let's set this equal to obviously this.state because it is the state of the birthday form.

<div>
    <Clock birthdayFormState={this.state}/>
 </div>

So save that and in here let's go over a little bit of what the component lifecycle methods are so I am just gonna go over one real quick and we can get a good explanation of what these are by googling something like I already googled this so I'm just trying to remember its component lifecycle explanation. Yeah and this link here component did make sense. It's a really good explanation. It looks a little intimidating to be honest but it's actually pretty simple. So we have at the start which is when our component is put into our code and then we have our constructor we have a componentWillMount function our render function which we are all aware of and componentDidMount and then so on. We don't worry about this right now.

So the first thing we need to worry about is the constructor here and in our clock, we have our constructor. So this runs first and then our componentWillMount runs and then our render function and down here he gives a good explanation of what these methods are in the whole lifecycle. So we have mounting the components being added and updates the component receives changes props or state and is called when the component is being re-rendered and Unmounting is the component is being removed from the DOM.

So right here in our constructor, it says this method is called when your components being created and so on

and down here it says componentWillMount now this is basically the exact same thing as the constructor. And he says it right here somewhere he says it is generally recommended that you use the constructor and I have checked multiple articles and they all say the same thing. But he says here that this method is included in the API mostly for backwards compatibility. So he says you should avoid calling any functions that cause side effects in this method and don't call setState because it won't change and there is no DOM to interact with.

So just don't worry about componentWillMount now worry about componentDidMount. So it says your component has now been rendered and exists on the DOM. This is the point when you should initiate AJAX requests add event listeners and perform any setup that requires a DOM. Calling setState during this method or any time after will cause a re-render. So this is directly after our render function is called. So it's basically right after our component exists on the DOM.

So in our app lets go ahead and type this component out or this method so its componentDidMount and this is running right after render so we have our constructor rendered and componentDidMount let's just put it right below our render function.

So in this function we have access to our props. So let's go ahead and set birthday so we're going to make a property called birthday and that's going to be equal tothis.props.birthdayFormState.startDate.to string so we're saying this.birthday instead of putting this on state because this has nothing to do with anything we need to reload. We're never going to need to re-render our application when we set birthday to something so it doesn't matter. Doesn't need to be part of our state. Anything you put in the component state you should make sure is used somewhere in the app where we need to reload the DOM to display it. Other than that it doesn't need to be in the application state. Let's go ahead and alert this we go alert(this.birthday)

then save that go back to the browser. Go back to our application. It looks like it says cannot read property toString of undefined. Let's go back here and see why. All right. So the reason being is that we named this star instead of start date. You might have not made that mistake and just real quick. The reason we're like where we're getting that is from our birthday component. So the alert opened up my browser but basically, it says Clock birthdayformState = (this.state). We are currently in the birthdayForm.js file and birthday and this.state is equal to startDate and formComplete. So basically it's accessing this and displaying it in our alert and we're setting our start date to something else when we click onClick. Which is why we're getting a different date than the one that's a default. So if I select something like 09/ 15/1997 which is my birthday and hit generate countdown. You'll notice it doesn't work. Let's find out why. Hmm, interesting. Let's reload this and it looks like it's alerting me and the reason our generate button isn't doing that is that we actually have our clock right in here immediately it's not requiring that form is completed. So basically if I put this to the side and save this or reload this it's going to alert immediately what the data is which is the current date. All right so let's make it so we have to generate countdown so we can alert a date we've selected rather than just the date that is automatically in there which is today's date. So I'm going to go ahead and in here I'm going to in curly braces type in this.state.formCompleted and that's going to access our form completed. And then we're going to put a question mark here and a semicolon here or a colin here. So basically anything if this is true anything on this side anything between here is going to run and anything on the site will be run if it's false. So what we want to put in there is each a div on both sides. So if it's true it's going to run that div and if it's false it's going to run that div and it's going to return that. So let's put our clock in here so if the form is completed we want to render our clock.

If the form is not completed we want to render our date picker so that should make sense.

So I will reload that and it won't alert anything. I'll type in my birthday I'll generate countdown and It will say Monday, September 15th, 1997. All right sweet. And you'll also see that this is days hours minutes and seconds. OK so let's go back to our code and let's just change a couple of things. Let's make these mins all right so that should match our application design.

All right. Days hours and so on again. Let's also make it so these are on their own lines. So let's change these divs without capital letters so div, div, and div.

So that's it for this video and the next guide, we will be learning how to calculate the time remaining until our birthday. And we will go from there. But after before we do this let's go ahead and in our terminal let's commit our code. So make sure you save the files be modified and type in

git status
git add .
git commit -m "added clock component"
git push origin master

Ok, I'll see you guys in the next video.

Resources

Source Code