So if we were to enter something later in the month it would work and so on. And what we're going to do in this video is make it so we don't have to reload the page every time and you'll also notice if you put in the same date we're going to get this error and we don't want that happen but we will get into that in the next guide so don't worry about that. Just know that every date will work. All right so let's go ahead and get started. So back in birthday form, we are showing our clock when the form is completed. But we want another input or another a tag like this so copy this paste it here

and for the text put in handle change date or let's just put and Change Date

and I'm not going to change the method yet the onClick and the reason being is because I want to go over the component lifecycle a little bit. So when we're running handle generate it's running set state from completed true. So that's going to be said on both of these so we will be in our component and it will say change date right. But that's just going to run this again. All right nothing happens because form complete is already true it's already rendering this and it's going to keep rendering this all right. But if we go into our clock.js and scroll to the top command-click in the component and then hit command F and type in cycle life cycle and hit enter and we will be brought to this. And if you can't get here just hit command F type and component lifecycle and hit enter until you get to this line 360 about.

So we have all these methods and they have a pretty good description what we're looking out for right now are methods that might run when applications state is updated or when we are receiving new props from the other component. So in our birthday form, we have birthday form state as a property and we're receiving that. So when our clock component receives that state or those props there are specific methods part of react that are going to run and one that we will the one that we will be looking at is should component update. You'll notice this has called immediately before rendering when new props or state is received not called for the initial render. All right. So on our clock.js let's implement that method. So shouldComponentUpdate and if you're in Visual Studio Code or probably Atom, and Sublime but if you're in Visual Studio it's going to let you see what these are as you start typing them in.

So shouldComponentUpdate and it looks like it takes in a couple of properties a couple parameters and it says next props let's go ahead and type in next props and let's just console.logand in backticks nextProps nextProps and we'll actually have to format this a little differently so if you type in JSON.stringify and in parentheses put the nextProps and it should display to us.

So save that hit reload and let's generate a countdown enter your birthday you don't have to but I want to. So we hit generate countdown and it should be logging to us so says clock stuff should component update return to undefined instead of a boolean value. So the reason that's happening is that I meant to implement this method. All right so shouldComponentUpdate is just supposed to return true or false like this is saying and we'll go over that later on. So change this to componentWillReceiveProps. This is the method I really meant to implement.

Go ahead and reload it put a birth date in then generate and it should be logging this now when we hit change date because it's only going to run when we receive new props and when we're in the birthday form we handle generate. It's going to set the state to our birthday form which won't change anything but it will re-render in the component lifecycle for birthday form it will run render like you see here. So birthday form render after we set state because setState makes it go through the lifecycle again or it makes it go through specific methods again like the constructor won't be called and willMount will be called but renders one that will be called set state and formCompleted is still set to true.

So this is still going to return the clock which is going to make which is going to trigger this lifecycle this component lifecycle which is componentWillReceiveProps and that's actually one that's down here somewhere.

So right here it says running props changed componentWillReceiveProps and they probably shouldn't even say props change they should just say well props modified. I guess that's the only way to describe it but basically, the props are the same but we're resetting it so it's going to it's going to pass in new props essentially even though it's the same data. But now if we go to our app and hit change date it will run that see next props birthday form state and it's logging out our props and that's because of what I just explained.

So that's not what we need to do I'm just trying to give you a better idea of how the component life cycle works.

All right so let's type our own method for this and let's call it handleChangeDate. Now let's type in this function handleChangeDate and up at the top let's bind this, this.handleChangeDate = this.handleChangeDate.bind(this). You can start to see that we're getting a nice little flow here of where things are supposed to go. We've got our imports we've got our binds in our constructor we've got our state setting up then we've got our methods and you can kind of see that there's a structure to all this and that's one thing that you'll really notice as you develop more applications is everything follows the process and structure and It comes back to breaking things and small problems step by step. Everything is a process in programming and really in life so just understand that this is a neat process anyway let's put something in this function. So what we want to happen is we want to unmount this component and we want to just display the date picker again. So all we have to do is copy this

and set from completed to false and that's going to do that.

Now let's enter a date, hit generate countdown and hit change date and it's going to do exactly what we want. But you'll see it says can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate in an unmounted component this is a no-op clock has not been unmounted.

We can unmount it by clearing the interval of the timer. So let's look over here and try and think of which method we will implement to announce this and it's pretty freaking obvious its componentWillUnmount. So let's type in componentWillUnmount and here we need to unmount the component. Basically you don't have to do this to every component because the component doesn't do anything that continues on depending on what we're building. But in this one, we have a timer running and we need to stop it so we can type in here console.log('trying to unmount CLOCK component')save that go to the app type a date in and change and it says trying to unmount CLOCK component because we've clearly took it off.

We've taken it out of here so it's not rendering anymore so it's trying to unmount. We still have that interval running so let's type in clearInterval(this.timer) and it took me a minute to figure this out. When I was building this but I actually noticed that in this article that we've been looking at he actually talks about it at the bottom. So he says your component had a great life now it's time for it to leave the UI. This is the moment to clean everything up that was associated with adding and maintaining your component while it was living on the user interface. So right here he's saying

And yeah right now what we're doing is clearing the interval of the timer so we've saved that and we've gone back to the browser. Choose a date and hit generate and try and change it. You'll notice it's saying trying clock component and we don't get the error. And that's because we're clearing the interval. So save your app and that fixes that in the next guide we are going to solve this problem and before we even let's type

git status
git add .
git commit -m "implemented change date button and implemented componentWillUnmount lifecycle method in clock.js"
git push origin master

and you might notice that my pushes are pretty random and that's just because you don't need to push all the time. I mean we don't even need to be using git but it's good to get in the habit of it. A better case for using git is if you were on a project with a few other developers. We will end the video here. I will catch you guys in the next video.

Resources

Source Code