4.4 Cleanup and Updating Component State
To this point, we have taken a few liberties to keep things simple. But our code could be more organized, so let's do a little bit of cleanup. We'll also do some more work with the component state.
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.4 Cleanup and Updating Component State
Since we've been adding a lot of functionality into our button pad, things have started to get a little messy. So I wanted to take a couple of minutes just to clean things up a little bit and add a little bit of additional functionality. So what I wanna do is I wanna take this process of creating these buttons like this in these maps and kind of extract this into another function so that I can kind of trim up this line a little bit and it doesn't get quite so long and unruly. So I wanna create another function here and we're gonna call this renderButton. And we're gonna renderButton for a specific letter. And so every time we want to create this button, we're gonna execute this function and it's gonna do some work for us. Now, it's gonna do a couple of different things for us but we're gonna start off fairly simply. So what I wanna do is I wanna create a class, or a CLS, variable here. And we're going to initialize it to MTU to start with. So then what I wanna do is I wanna say if this.state.letterMap. So I want to go into my letterMap and I want to look for the particular letter that was clicked and I want to say if it was clicked. So if the user has clicked that letter, then I want to come in here and I want to say, CLS is actually equal to CLS will do some concatenation. And then we'll add on there, the class that we're appending on here based on the functionality that we did here in map letters. So then what I want to do is say this.state.letterMap and for that letter, we wanna say .CLS. So that's going to allow us to append a class on this so that we can use it later on. And then once I've done that, I simply want to return some JSX. So I'm gonna say return and then I wanna take all of this right here, all of this button code right here. I'm gonna cut that out and I'm simply gonna say, this.renderButton and I'm gonna pass in my letter, just like that. So then I'll bring this guy back up here and I'll simply return it like that. So let's go ahead and save that, and then we'll pop back over to Chrome and we'll reload this just to make sure that everything is running as it was before and it is which is good. I am getting a warning down here that it says CLS is assigned but it's never used and we're actually gonna take care of that right now. So one other thing that we have going on in here is that when we click this we're executing this letter click hammer that was passed to us and that's good. But there's also things that I wanna do within my button pad when a button is clicked. So instead of calling that directly, we're gonna create one more function. And it's gonna be called handleButtonClick, and it's going to be executed when somebody clicks on one of the letters, so we're gonna pass that in. And then there's a couple of things that I wanna do here. So first I wanna get the mapping for that particular letter. So I'll say, let map = this.state.letterMap and then I want to go ahead and set that particular mapping value for that letter, I wanna set that clicked property equal to true. So this means that that particular letter has been clicked now it's true. So now I have this updated state here of this letter map. How do I make this available to everywhere else in my application? So we've seen how we set state in the beginning. We've done this in a couple of places, and that's good. But you really only supposed to do the setting of the state inside the constructor of your component. If at any point you wanna update the state somewhere else in your application, then you need to use a different function called set state. And the way that we do that is we say this.setstate, and then we pass into it, an object that's gonna contain a series of properties. Now, the nice thing about this is that because we're only updating this letter map here, and if you were to look up here we have letters in there target word, letterMap, letterClickHandler. I don't have to repass this entire object in there. All I have to pass in is the part that I want to update and in this case, I want to update that letterMapping. So I'm simply going to come down here and I'm gonna say I want to update letterMap. And I want to set it equal to map. So every time a button, a button is clicked, I'm going to update its click status inside my letterMap, and then I'm going to execute the set state function of my component to say I want to update the letterMap or whatever property you want to be that new particular value. And then after that, I'm gonna say this.state.letterClickHandler and pass in that letter. So now I'm doing multiple operations. I'm doing some local processing, some local updating of the state inside my button pad. And I'm also using that buttonClickHandler that was passed into me from the game board. So now I just have to take advantage of this by changing this on ClickHandler to instead of being calling into that letterClickHandler. Now I'm saying I just want to handle button click. So now I have a couple things going on here. So let's go ahead and save all of those changes. Now, we'll come back over here, and before we actually do that, I do wanna take advantage of this class that we're using here. So in order to do that, I'm simply going to come down into the button that I'm rendering here, and I'm going to use that class name attribute again, and I'm gonna set that equal to CLS. So let's go ahead and save that now. So now if I save that, now this warning down here should be gone. Now, everything here looks the same. But let's say I click on K this time now I see the game board check letter K, that's still there. But, if everything else worked, right, and I reset the state, every time you call that set state function, it's actually going to rerun that render function within your component. So if I were to go in to my markup down into the letter pad here, into all of the buttons that I have, in that second row because I clicked on K, you're gonna see now that I have missed and the reason it says missed, is because there's no K here in tutsplus, but if I were to click on let's say the U, it's gonna say that I clicked letter U. And if I were to go down to the last row here, it has run that code and it has updated the class to be found. Now there is a little bit of extra space in here I can take that out, we can add in additional classes and we may do that with some additional styling. But now you can see that I've updated my game board to do a couple of things. I cleaned it up so that I can make some calls to not only local functionality as well as parent functionality, but I've started to use this concept of setting state, which like I said before, every time you call set state on a component, it's going to actually update your state that you did in the constructor and it's going to re-execute the render function.