4.1 Introducing State
One of the best features of React components is the idea of "state". Each component you create can maintain its own state throughout its entire lifetime, and this has some amazing benefits that we will learn about later. For now, let's start by learning how to create and use state in your components.
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.1 Introducing State
The next thing that we're going to do is we're gonna build out the next component of our game. And that's gonna be the button pad, if you will, that appears below the squares or the letters that we want to have the user try to guess. And we're going to have them all be buttons, they can be clickable. And then as we go along, we're going to make them a little bit fancier. And if you click on that, the letter appears in the target word, then we'll, we'll highlight that button green, or if it doesn't, will make it red. So it's very, very visual as to which letters that the user has clicked and which ones are correct and which ones aren't. So let's go ahead and start very simply. Let's go ahead and create another component, let's say class. This is going to be our button pad. Once again, you can call it anything you want. I think that is fairly accurate for what this is going to be, this is going to be a component. And we're going to have to talk a little bit about what this is going to look like, and ultimately how we're going to build this out. So how are we going to build this pad, because what is it going to look like? Well, we're talking right now at least I'm going to be assuming that we're talking about the English language. We're going to be talking about the alphabet which is going to be consisting of the letters A through Z, 26 letters or characters depending on why you wanna call them. So how do we do that? I don't really wanna pass that into these components cuz that that really won't make very much sense. And nobody is gonna want to create a component and then have to assign 26 different attributes to an element so that they can render it. So in order to get around this, we're going to introduce at least, a new concept for now. Not really used necessarily the way that you're going to use it more often throughout your react development. But it's going to be a very important concept for you to understand as far as components are concerned, and that's gonna be up state. So one of the very cool features of React is when you create these components, each one of these individual components has a concept of state. So it has state management within itself, so that you can assign it certain values at certain times of its lifespan, or if its life cycle. And then make changes to that state as you go. And when you make changes, it's going to cause you to actually re-render itself. Which is a very powerful feature we're gonna take advantage of that a lot going forward. So how do you use that? Well, let's go ahead and introduce this very simple info now and then we'll talk about how we're gonna use this and render it. And things like that in a few moments. But the way that you introduce the concept of state or that you get a hold of it, is you first begin by creating a constructor inside of your components. So I'm gonna say in my constructor, I am going to do something with the state. But before I'm actually allowed to do that, whenever you are working with the constructor, and there's gonna be a couple variations of this that we're gonna use over the remainder of this course. Is whenever you go into the constructor, you're always gonna wanna call super. Now super is going to be the constructor call of the React component class that we are extending. And because we wanna make sure that we're maintaining valid functionality, every time you create a constructor inside one of your custom components, the first thing you're gonna wanna do is always call super. And we're gonna make a variation to this in a few moments. But for now, this is gonna get us pretty far. So now we can start to work with state. So what does that look like? Well, state is actually a property on this. So I can say this.state and then I can set this equal to. Now this is going to be a dictionary of any sort of things that I want to be in here. This is gonna be a bunch of key value pairs and I can put anything in this state that I want. So in this case, I want to set what the letters are gonna be for my button pad. I think that's something that's reasonable to put into the state of my button pad, I want all of the buttons. So I'm gonna create a letters key. And then this is going to be an array. And it's actually gonna be an array of arrays. And I'm gonna tell you why a little bit later. It's really for more of a visual effect, but you can really break this up in any way that you want. So this is actually gonna have four sub-arrays in it. So I want to make the buttons appear in four separate rows so that they kind of breaks up UI a little bit. Maybe it's a little bit more aesthetically pleasing to the end user, and they don't see just a giant long horizontal line of all of the buttons that they can press. So I'm gonna go ahead and fill in all the letters here and I'm just gonna type them in so you don't have to watch me doing it. Then I'll come back and we'll continue to talk about how we're gonna use this in the component. Okay, so now you can see here that I've created a list of list, or an array of arrays for all of the letters that I want to use inside of my button pad. And I've just kind of break them out this way so that I can easily format them on the screen. So now that I have these letters, let's go ahead and put some buttons on the screen for each one of these so that we can actually see them displayed to the end user. So there's once again, several different ways that you can do this. I'm going to instead of using a for loop to iterate all of this, I'm gonna use a couple map. Functions and I wanna show you how you then in other places inside of your component, get access to state. And how we actually do that, how we retrieve information from the state. So we'll simply say const, we'll call this a letterGrid, I think that's probably a reasonable name for this. And we're going to set this equal to this.state.letters. So as you can see now anywhere else in my component, I can access the state. And I can access each of the individual properties in here by name. So as you can see, I have letters I'm gonna access letters. And then what I wanna do is I wanna map over those. And so each time that I execute this map, I'm gonna be dealing with each one of these rows. So I'm gonna say I have a row here of letters. And I know I'm gonna have to iterate over this. I'm gonna need an index once again, otherwise, I'm gonna get that key issue inside of Chrome. And then within here, we can change this a little bit later on. All I really want to do is get this to display something. So in order to do that, each time I iterate over this, I'm going to create a paragraph tag. And then within there, I am going to then iterate over all of the letters found in each one of these rows. And the way that I'm gonna do that is I'm gonna say row, because I do get access to this variable right here. But remember have to use curly brackets. So I'll say row, and I'm going to once again do map again here. And in this case, I am going to be dealing with a letter each time at an index. And then at this point I really want to display a button each time. And once again, we'll get into styling and all that kind of stuff later on. And in this case, I'm going to save the key here. And actually, I can use the letter as the key here because I know it's going to be unique. Because I know each one of those 26 letters in the alphabet is going to be unique in this case. So I can use the key there for that one, and then we'll close off button here, and scoot over just a little bit. And looks like it already did for me and I'm gonna put letter in there so I can actually display the letter. And then I need to close off my map function. And then close off my curly brackets there and hopefully that's okay. And for each one of these rows, I'm going to need to use a key here. Key is going to be equal to this index right there, and I'm probably not going to actually need that index there. So let's go ahead and try that,we'll and do a little bit of this on the fly. So let's go ahead and save that. So now I have this letter grid where I've tried to iterate over all of these letters found in the state of my button pad. And then at the end here, all I really want to do is I want to return. We'll do another wrapping div here and I simply want to display my letter grid. Once again in order to display the value found within that variable, I'll simply use my curly brackets. So let's go ahead and save that. So let's pop over here to Chrome. And as you can see here, that button pad is defined but never use. So I did a good job of defining it, but I'm not actually using it anywhere. So let's go down into our game board and then let's go ahead and put a this underneath the letters. Create another wrapping div here and then I'm simply going to put in my button pad just like that. So let's go ahead and save that. So now if I head back over to Chrome, now you're going to see that we are all here. Now, this is pretty good, but obviously, I have a problem here because this is all a wrapping here, and I can really make these look a little bit better. But once again, that's all styling issues that we could work through a little bit. So instead of doing it this way, let's go ahead and just so they're not right next to each other, let's just put in a couple of breaks here. We'll go ahead and save that, we'll pop back over and there we go. So now we have our button pad here, obviously not very pretty but we'll work on that, I'm not too concerned about it. But now I have all these buttons here and they all function, I can click on them. They don't do anything yet but at least now they're being displayed. So now we have most of the components, most of the pieces of our UI. It's starting to take shape, we have our actual letter here for our word that we're trying to guess. We have a button pad, we have a few status things, here and there, to display. But for the most part, we're really starting to take some shape. So let's go ahead and get a little bit more of these state things created inside of our components. And then we'll start really working on some of the game logic itself.