- Read Tutorial
- Watch Guide Video
I said we wouldn't be getting into styles too much and that's still how I'm going to do it. We're going to do the styles after we build it out but this was one that was really easy to implement. So we just went ahead and threw that in there and in this guide we are going to be adding the generate button. So this button right here
and you can also see that these are pretty similar which is pretty neat without the styles. So once we add the styles and everything will be looking good. But anyway we are going to add this generate button. Heading over to the design you can see that the generate button is looking like that. We also have this Trello board with the application summary, the main objective and you can see this general button here as well.
In all the guides I will be leaving screenshots of the of the application summary the wireframes, user stories, UML diagrams, and a link to the design as well. So if you're wondering how to get to that it should be in the guide notes below and if it's not for any reason just look at my screen. But yeah we're going to be adding in this generate countdown button. So the first thing we need to do is head over to our application code and if we go to the browser actually let's just kind of go over this real quick. So if you enter on a date nothing happens. Let's just go back and do our code real quick and let's just alert this so we know that it's setting it. So
alert(this.state.startDate)
then go back to the application in the browser and reload it. Select the date and it will tell you that it is selected so 24th it's going to be telling you the previous date. But don't worry about that. So we have that working. We'll get into that after we have the generate button. So back in our code let's add this generate button and the way we can do this is by adding in an input here or rather let's not start with the form let's put in an in a tag. But the first thing we want to do is type in the a tag and in here let's just type
<a onClick={this.handleGenerate}>Generate Countdown </a>
It says generate countdown so let's go ahead and put generate countdown and for the class name. Let's just not put anything for now. So save that go to the browser and the button should be there. All right so the buttons there. Let's see what we can do to make this work. So looks like we have this that says handle generate let's go ahead and type this out so handle generate equals function or let's do it like we did this previous function so
handleGenerate() {
alert('trying to generate countdown');
}
go back to the app reload click on it trying to generate countdown. Let's go ahead and set this up with our state. Let's go ahead and make it so when we click that we are setting some variable to true to indicate that we have completed the form. So let's go into our state and let's give it a value adding a piece of state called formCompleted. Let's give it a value of false because the form is not completed initially
and in handleGenerate let's go ahead and set the state. So
this.setState({
formCompleted: true
})
The reason we set this to stay you might be wondering why and the reason we do this is because we need to re-render the form whenever we perform an action like this so you might be wondering and I even asked myself this when I first started with reactors like why don't we just this.formCompleted = true.
Then I'm like why have it in here so I get rid of that
and then I would just have it alert(this.formCompleted). Then in here I could put this.formCompleted = false;.
So same setup it is just not in the state. So if we go into the browser and run this you'll expect this to say false and this to say true and that's exactly what happens. So we will hit generate and it says can not read property formCompleted of undefined. Let's try putting this in the render function. And it's not working because we haven't binded this we have not bound this. So let's go ahead and do that this.handleGenerate = this.handleGenerate.bind(this).
And that's a perfect example like it's a good thing that I had that that mistake that error because that might help you understand further why we binding it and it's so we can access specific things that are part of this component. No other instance of the component and that's why it was working earlier because we're doing anything with this. We were only alerting some console log message so it was like a static method almost. And you might know what a static method is or a static function if you have done any object-oriented programming. So that's a little bit of why we bind it and we go back our browser reload it and hit generate you'll see it says false and then it will say true immediately. The reason it's doing that is we're setting this.fromCompleted = true right after we've alerted that it's false so you might be wondering ok that works perfectly why are we using state. And that's because setting state will actually run some of the component lifecycle methods so if you go over to React and this is in the guide notes below you'll see that it says, real quick let's see if we can find the function here I'll actually pull it up in the Visual Studio Code.
But you can also look there if you want but if you hold command and type and click on component we will be brought to the component lifecycle. If you type in lifecycle you'll be brought to the component lifecycle and you'll see we have componentWillMount called immediately before mounting occurs. All right now you'll see that right here in componentDidMount setting state here will trigger re-rendering and basically, if you read through these you'll kind of get an understanding of each of what each of these does. But we're not going to do that right now. I'll walk you through that in a later guide but that's just to give you an idea of what setting state does. It's one way that will re-render the components so we want to set state from completed to true so this.setState({ formCompleted: true;}) and make sure you add formCompleted back up in our initial and our initialization of state.
So let's set that false and as you can imagine this is going to do the same thing it's going to set too true and we will have our piece of state for use so generate countdown false and yes. So let's go and get rid of these alerts real quick and now that our function is working let's go ahead and put it on the screen. So in here we could put something like an H1 tag or let's just put it like an H2 tag and in here let's go ahead and let's display the form completed variables so we can say or better yet we can just display. Actually, let's do this so this is only appearing if the form has been completed.
So we can copy this in here and we can type in an if statement around this and say if(this.state.formCompleted) then we want to return this and we actually have to put this in a function so let's go ahead and copy this. Let's make a call to this.renderStuff and we're going to delete this so don't worry about what that's called and make sure you bind to this function as well. So go up here copy one of these and copy this renderStuff and bind it.
Now it's going to say ok state is completed return this and if it's not completed it will return form and has not been completed don't show countdown timerand show countdown timer here.
Ok save that and right here delete that semicolon. Go back to the browser reload it and we can see what's going on here. So it says form it is not completed don't show the countdown timer and then right here we can put it ok let's generate it. This is only appearing if the forum has been completed show countdown time here. So you can kind of get an idea and this shouldn't be anything new to you. We did the same exact thing in the last app but I may not have explained it as well so this might help you understand a little bit more of how application state works and basically the reason I'm calling setState here like I was explaining before because calling setStateit reruns some of the functions and one of those functions is render it renders that component. So if we are just to do the other method where we were saying this.state or this rather just this.formCompleted = true. It would not re-render it so that is one reason we use that state instead of just using a normal class variable like the stuff on completed. So yeah that is how that works. Let's go ahead and get rid of this since we don't need it
and we will be going on with that later on. So that's how we add in that button and that's a little bit more of how state works. In the next guide, we are going to set up our clock component and basically we are going to be rendering content similar to how we were rendering this except for it's going to have its own component it's not just going to be h2 text in the same component. All right and before we move on to that guide let's go ahead and commit our code so type
git status git add . git commit -m "modified the birthday form"
I'll see you guys in the next guide.