4.2 Adding State to the Button Pad
Now that you understand the basics of component state, let's start to use it a bit more. In this lesson, you will add some important state properties to the
ButtonPad component, which will become very important later.
1.Introduction2 lessons, 03:04
2.Getting Started3 lessons, 15:16
3.Building React Components4 lessons, 24:57
4.Working With State6 lessons, 40:38
5.Winning and Losing3 lessons, 17:14
6.Refactoring and Final Changes3 lessons, 16:55
7.Conclusion1 lesson, 01:40
4.2 Adding State to the Button Pad
Over the rest of the course what we're looking to do is start to add functionality into our game that's gonna play off of the state. And then I'm gonna show you how we update state and how everything gets rerendered. But in order for that to happen, we have to set up the states properly so that everything knows about everything that it needs to, and that each component has the proper state. Now, one of the things we already talked about doing was having our button pad there. And whenever the user clicks on one, if that word exists, or if that letter exists in the target word, then we want the button on the pad to turn green. And if it doesn't exist it turns red. So it just is an easy way for the user to kind of pay attention and keep track of the ones that they've clicked, and which ones are correct and which ones aren't. So in order to that we need our button pad to know about the target word and the letters that exist in there. So let's start to build that up a little bit. So the first thing that we wanna do is we wanna take the target word that we're starting in our hang man component. And we want to then take it from the game board and pass it to the button pad. So let's do something similar here. We're gonna say target word. And that target word is gonna be equal to the target word that we passed in here. So we're gonna say this, that props.targetword. And now that's being passed into button pad. And now what you're typically gonna see when you're passing or propagating these properties from parent components to child components, is you're gonna see a dictionary of these properties being passed into the constructor, and then ultimately being passed in to the super as well. So that's just a good habit to get into when you're creating these components, so that you always have access to them. So now what we wanna do is we wanna augment our state a little bit and we're gonna add in this concept of a target word. And since we already now have this props in here, we don't have to do this stop prop we can simply say props.targetword and that's gonna take care of it. Now one other thing that we're gonna need to do is we're going to need to create a kind of a special mapping of all the letters to know which ones were clicked, which letter the user has clicked, and whether or not it actually shows up in the target words that we can base some logic on that. So what we're gonna do is we're going to create another property here in the state, called the letterMap. And initially we're just going to initialize that to nothing basically, we're not going to have anything in there. And so what we wanna do is we want to fill that in with the proper mapping based on the target word that was passed in. So let's go ahead and do that now. So when you're working with the state and you're setting the state like this within the constructor, you can set it as one big object or you can do it piecemeal, as you need based on whatever key you want to be updating. So I could say something like this. I could say, this.state and I can access my letterMap and I can set this equal to the result of some function. So I can say this.Mapletters, like that, right? So now I can use another function to populate part of my state, so let's go ahead and write a function that can do that for us. So I'll say mapLetters. It's not gonna take anything in cuz it's only gonna use the information from the state that we already have. All right, so let's create this mapping. So I'm gonna say let map be equal to a dictionary. And then I want to go through all the letters that. I have in here, I want to check to see if that letter exists in my target word, and then I'm going to create a little object that's gonna go into my letterMap for each letter. So let's start to work through this a little bit. We'll say this.state.letters. So we're going to go through each of the rows of the letters and do a forEach. And then in this case, each one of these is going to be we'll call it a letterRow. And then within here, we are going to then iterate through that letterRow which is once again in array will do another forEach here. And this is gonna give us a letter each time. So we'll say for each of those letters, we wanna do a particular operation. So let's go ahead and say const letterInTarget is gonna be equal to this.state.targetword. So we're gonna go into that target word and we're gonna say .tolowercase. Since we are not really differentiating in this game between upper and lowercase letters, we're not gonna require two button pads, one with lowercase one with uppercase, we're just gonna say if you click on a capital A. And there's capital and lowercase a's and the target word, those are all gonna be the same. So that's gonna be good. So we'll say that to lowercase and we'll look in the index we wanna find the index of, we wanna look for the letter that we are at in this current point of the letter row as we're iterating through the letters. And we're gonna do a .tolowercase here as well, just like that. And if that index is greater than -1, which basically means it exists, right? So now, that means that that letter does exist in the target. And then we can say in our map, we can say the key is going to be letter. And then we're gonna set this equal to just a little bit of an object here. So we'll have a property called clicked which means it was clicked. Everything is gonna be initialized to false. And then, we're gonna have another property here that's going to be kind of used to dictate what the styling is going to be for this letter after the buttons been clicked if it exists in the word or not. So we're just gonna call this CLS for Class. So it's kinda gonna be the class that we're going to use for the button after its been clicked. And then in this case, were gonna set that equal to. If the letter was in the target, which means it existed, then we're going to assign a class we'll just call it found for now and we'll fill that in a little bit later. And if it wasn't, we're gonna call it missed so that if the found class will have something to do with turning the button green and miss will have something to do with turning it red, or you could do any sort of coloring that you would like in there. So, now we have this map dictionary and I wanna assign it back to whatever I set here in my state. So all I have to do at this point is say return map. So now when I execute this, it's going to set the state here and it's gonna build this nice little letter map for me so that my button pad knows which letters are contained in the target word as well as what I'm gonna do as far as styling with those letters once I click on the buttons.