In this guide, we are going to make it so whenever we hit any birth date within the year so 09/15/2018 for example and hit generate countdown we're going to make it so this does not appear because none of us are zero.

We all know that or none of us are less than zero. You get the idea. If I reload this, I mean like some people might not want to enter in the year. They just want to know how long until their birthday. So they just use the date picker and select the 22nd of September right and hit generate countdown and it gives them that message. And like I said that's not good none of us zero none of us are less than zero either. So the way we can fix this is by setting a class property called noBirthYear and we can do this by saying this.noBirthYear in the constructor of our clock.js is equal to and the pseudo code for this would be something like equal to our bday.year == Today.year. So basically we're just going to be checking if it is the same year and if it is we want to display a different message and just say until your birthday.

Because it's not very good user experience to say remaining until you are zero or one. So let's type this out in code now so new Date(this.birthday).getFullYear. And we have access to this.birthday because we are setting it right here above. Now let's say equal to new Date().getFullYear.

So basically we're doing exactly like I just said we are getting the date of the birthday and then we're getting the date of the current year and we are comparing them and if they're the same we are going to set this to true. It's going to return true and if they weren't the same or if we changed this to this it would return false because it might say 2018 and then this might say 2018 and then it says okay those aren't the same return false. But in this case, we put in a date like 2020 and it's going to be equal to the same thing. It's just going to say true so that's going to be set to true. Now, this is all great but you might wonder why don't we just add it in state. This is really weird why are we setting things as properties and why are we not setting things in state. And I explained this a little bit before but I think it's probably important I go over it a little bit more so you really understand why. And that's because and the reason we don't do this is that again setting state will call our methods in the component life cycle and we don't want that to be happening. We don't want to re-render anything. It would be a waste of resources to re-render our application when we set no birth year because it has nothing to do with it. We don't need to re-render the app once we set this. This is going to be accessed somewhere when setState is called somewhere else. So yeah we don't need to do that and we can read about this by typing in something in google like okay what's the difference between react state and if you didn't even know they are called properties you could type in react state or class variables or something and then we can click on this link

and say all right instance vs state variables like this looks like it's something along the lines of what we're looking for. And the reason I'm doing this is to show you how to like find solutions on Google. And this guy says something like I suggest storing it on the instance but not saying whatever state is updated which should only be done by setState as suggested in a comment react calls render and makes any necessary changes to the DOM because the value of timeout has no effect on the rendering of your component it shouldn't live in state. Putting it in there would cause unnecessary calls to render.

And then you could kind of get an idea of what he's asking as something completely different than what we're doing but the ideas are the same and we can see oh ok we don't want to call setSate because it's going to call an unnecessary render. It's going to make an unnecessary call to render and we don't want that. And that might not answer your question. So a good thing you could do is search around you could click on why use state class properties. Basically we already kind of explain this and we already know but again I'm showing you this so you can find answers like this on your own when you have a question and I don't think you're stupid. I didn't think of this initially when I started programming so that's how you can google and find specific answers. Okay and that's why we want to do that. So this is going to be set to this.noBirthYear that's going to be equal to true.

So now down here we can say okay let's put this in a function and return a different message if that's true. So let's just take the entire h4

and let's make a call to this.renderMessage and let's type this out renderMessage = function(){}.bind(this), if this.noBirthYear we want to return a message saying until your birthday and returning will take us out of this function so we don't need to write another condition or else we can just return here because if it doesn't pass it's going to go here. Then we can say remaining until you are this.getAge and it will tell us so saving that

we can reload the page and we can put any date such as the 15th. And it says until your birthday so that's how you do that and it works great. That's it for the coding in this set of guides. We are going to hop into styles and I guess styles are coding too but that's it for the javascript, for the most part, there might be a few things we go back and change or add in such as react or redux. But yeah we'll get around to that if we get around to that. But in the next set of videos, we are going to be going over how to style this application and first adding a few styles to make it look more like that and then we will add in all the styles and make it look like this right here and here. All right I will see you in the next guide. Real quick let's make our last commit and push to git hub for this video so

git status
git add .
git commit -m " added no birth year message"
git push origin master

And that is it for the majority of the REACT, Javascript coding in this set of Guides. Like I said we are going to get back into the styling aspect of things. See you all in the next video.

Resources

Source Code