4.3 Adding Dynamic Content
State allows us to provide dynamic content to the user. You'll see how to do that in this lesson.
1.Introduction2 lessons, 06:11
2.Getting Started2 lessons, 14:39
3.Building the Hangman Game5 lessons, 39:23
4.Working With Data4 lessons, 32:39
5.Conclusion1 lesson, 00:56
4.3 Adding Dynamic Content
So we finally have a working application and it's working beautifully. However, there are some things that we can do to enhance the user's experience. Like for example, we need rules. Every game needs rules, otherwise it's not very fun because otherwise, we could just come here. And we could just click all of the letters and then, hey, we won. And that's no fun, so it would be nice to have a limit on mistakes. So that means that we need to track the amount of mistakes and we can do that very easily with State. So let's get started inside of our game-board component because that is where we would need to track this. The game-board is controlling the other parts of the application so it makes sense to track our mistakes here. And we could create our stateful variable, we'll just call it errorCount. And then we also need the accompanying function to set the new values for that variable. And let's initialize this as zero because on the outset of a game, there are no mistakes. So it makes sense to have that. And then inside of our letterGuessedHandler, this is where we will check to see if the guessed letter is a mistake or not. So we have the secret word, but we do need to set that as lowercase. And then all we are going to do is check to see if it has the provided letter. And if it doesn't, then we are going to increase our errorCount. And there we go, we are now tracking all of the mistakes. So now we just need to tell the user how many mistakes that they can make. So we could define a variable here, we could call it maxErrors and then we could set it to whatever value that we want. But I think we would want to do that at the app level as a prop. So that we would have the maxCount or the maxErrors here. Then we could set that to whatever value that we want it to be as the max, which I'm just going to go with the value of 6. So now we have this prop called maxErrors and inside of our markup, we could let the user know how many mistakes are left. So we can have mistakes left. And then all we have to do is take the maxErrors, and subtract the errorCount and that will let the user know how many mistakes that they can make. So, here we go. We can see mistakes left. And we know that this word is Tutsplus. So if I click on anything that is not in Tutsplus, we can see that everything is working as it should. The only thing that we need to do now is disable the application so that no more letters can be guessed. And one of the best ways that I can think that is to just hide the button grid altogether. Because if you hide the buttons, nothing can be guessed. So for our ButtonGrid, let's add another prop. And we will do something kind of what we did with the letters in that we will have something to indicate whether or not this grid is going to be shown. And the way that we will determine that is if the errorCount is less than the maxErrors. So now we just need to actually implement this prop inside of the ButtonGrid, so let's open that up. We will now have letterGuessed and isShown. And if isShown is ever false, what we can do then is manipulate our CSS classes. So that we will do essentially what we have done before, to where we will have our className variable which is going to be initialized as the default CSS classes that we need. And then if this is not shown, then we will add another CSS class to the list. And I don't know what we want to call this, we could just call this hide or hidden. And then we will set the className as our className variable. This of course means that we need to define this hidden class. So let's go to our CSS file and let's just add that. And what we will do is set display to none, so that our ButtonGrid should be hidden. So let's test this out. We will get to no more mistakes. That obviously didn't work. We don't have any errors, so that's good. But it does help if you save your files. [LAUGH] It can't update it otherwise. So let's try that again. Let's get the maximum amount of mistakes and voila, we can see that the ButtonGrid is gone. We can no longer guess any other letters. And our hangman application is just a little bit more fun because of it.