Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:22Length:2 hours
Practical react fundamentals 400x277
  • Overview
  • Transcript

6.1 Clean Up the Code

Let's do a little final cleanup of our ButtonPad component and talk about one of the main shortcomings of our game. It's fun to create an instance of this game and give it to someone else to try to guess the word. But if you wanted to play it by yourself, it would be a bit of a problem. Let's discuss a possible solution.

6.1 Clean Up the Code

So as far as the game is concerned, you're basically done with the functionality but I do wanna clean up this button pad a little bit. And I wanna give you one other little nifty trick that you can use to make this an interesting game for you now. Right now, you are providing that target word. So when you are, creating this component, you have to put in the word that you wanna use. I'm gonna show you a nice little interesting trick and how to actually add in some API calls from your react components to go get some data from somewhere on the web and then do something with it, do some processing inside your application. And actually surprise yourself with whatever word and actually play this game yourself. So, let's start with cleaning up the button pad a little bit and then we'll introduce the concept of making this an interesting game for yourself. So let's hop back over to our code. And what we wanna augment here is in our button pad, our button pad component down here in our render. One of the problems that we're running into right now is our styling has kinda of messed up the way that this is working. We were kinda playing with the fact that we're using a paragraph tag a p tag, and basically what that does is it drops everything down on its own line and it's kinda of like a cheating way to get this to show up the right way. Well, with our styling things kinda of got out of way a little bit, and everything is kinda of in a long line and just stretches across the screen and that's not really what we want. So, one other thing that I'm gonna do here is I'm gonna, just add in a wrapping div, because what I'm gonna wanna do here is, and actually here's the other tag. I'll just drop this over on the other side. What I'm actually gonna wanna do now is, I'm really just going to leave it the way it is. And I'm gonna add in a break. So I'm just gonna put in a break like this. Let's go ahead and hit save there. And if I come back in here, now everything is kinda spread out a little bit better. But now we've reintroduced that unique key property issue. And the reason that that shows back up again is because, I've added in this wrapping div tag and the key is actually on the child. So we're gonna grab this key and cut this out and bring this out here to this div. So let's go ahead and save that. Come back over here, we see and this is now rendering nicely again and I can go ahead and play my game and we know that this is going to be Tutsplus. And that's great and I can win the game now and that error is now gone. But the problem, like I kinda mentioned before, is that every time we create a new instance of our hangman, we are actually passing in these targeted words. So we really know what this is. In order for this to be something else, like I said before, if I change this to say Derrick, I come back over here. This re-renders and now I can play again, but I know what the word is. And I wanna make this interesting not only for you to play but for other people as well, the only way it's interesting for you is if it gets some sort of random word. So in the next lesson I'm gonna show you a nifty little trick, I'm going to introduce to you how you can make API calls from your react components as well as introduce another concept as far as state, when it comes to your components. So, join me in the next lesson and we'll kinda tie a nice little ribbon on this course. And then you will be ready to go.

Back to the top