In this guide, we will be setting up state and making it so we can see the dates we are entering into our date picker to get started in your constructor. We need to declare our state so this.state is = {}. The reason we if you remember the reason we're doing this.state in the constructor is that it's our initial set up of state. We don't want to use this.setState in our constructor and anywhere else in our component we will be using this.setState to center state where we never want to access state like this. And that goes back to the guides I discussed. Why react docs say not to do that. So in this.state let's set up our first piece of state which is going to be startDate: and we need this to be a type moment and moment is what we installed and the last guide if you still have your terminal open we installed it using npm i -- save moment and to get an idea of what moment is go to Moment and we are given a good idea of what it is so basically moment is like the date object in JavaScript.

If you go to type in the moment.js and you go to NPM there's a description right here that says it's a lightweight javascript date library for parsing validating manipulating and formatting dates and the reason you use this instead of just the date object in JavaScript is because of our date picker component that we installed requires that we use moments if you command-click on date picker you can be brought into the date picker object and you can see what is going on here. So basically we are going to need to use moments to utilize the date picker effectively so DatePicker or rather in startDate here in the constructor let's just give this the value of moment.

So that's just going to give us the current date and that should be set up all good. All right so before we add anything else in this.state let's go to our date picker object and let's actually pass in a couple props here. So the first is going to be called selected={this.stateDate} so that's going to be mapped to our state and give us the date we select and the way we can change this state is by adding this onChange prop and typing in this.handleChangeand if you can imagine where we're going with this we're going to have to type out a method. So we can type it out like we have been typing so

handleChange = function() {
}.bind(this)

or we can do it in a cleaner way by typing in handleChange(){} and just that. So the way we combined this instead of putting it right here is by in our constructor by putting in

this.handleChange = this.handleChange.bind(this)

So that's just another way of binding your functions and I think it cleans up the syntax pretty well. So I'd recommend doing it that way.

Now in our handleChange, we're going to need access to a date so the way we can do that is by passing in a date and then we have access to the date we're selecting on change. So to get an idea of where this is where this is going type in alert(date); and save that go back to the browser reload it and we will be alerted with the current date. So let's see why it's not alerting us and it says moment is not defined and that's because we haven't imported it. So in the top of our file, I have to import moment from 'moment' save that go back to the browser reload it and we should get that alert. All right so we'll get that alert when we change the date so let's choose March 14th. So it says Wednesday, March 14th, 2018 the exact time we selected so I'll do that one more time, like the 31st same thing. All right now we don't just want to alert this we want to actually set it into our state so we can use it in our components in the future so the way we can do that is by putting in another or rather just in our handleChange instead of alerting it let's say this.setState and startDate: date. So that should give us access to our state to our current start or the selected date.

The reason we're calling it startDate is because we are going to make a counter that counts down the date we want to start at from the selected date. So it's the startDate and we'll actually have to write a little bit of code to make it so we can display the age and a little bit more. So that's how you set up state in the form component.

In the next guide, we will be adding the generate button in our birthday form component. So to end this guide let's go ahead and commit our code.

git status
git add .
git commit -m "set up birthday form component set up date picker with moment.js"
git push origin master

we are all pushed up and we're good to go. So I'll see you in the next guide.

Resources

Source Code