FREELessons: 14Length: 1.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.4 Handling User Input

The last thing that we need to do is modify the application so that one of the players can set the secret word. So this is the functionality I want. Whenever we load the page, we will display a form that is just going to have an input element and a button. They will fill out the form, and that will set the secret word for the application, and then the game board will be shown. So very simple, we just need to make it work. So we're going to do most of this work inside of app, because that is where we have our GameBoard. And it kind of makes sense, because setting the secret word is outside of the realm of the GameBoard. I mean, well, you could make the argument that that should be there. But I'm going to make the argument that it shouldn't, this is just part of the application. So we need a few things, the first thing is the useState hook. So let's go ahead and let's import that, so that we can use it to create our first stateful variable, which is going to be secretWord. We will have the accompanying setSecretWord function, so that we can modify that value whenever we need to. And let's initialize this as just an empty string, cuz that makes sense to do so. And so as far as the functionality of hiding and showing these different components, the GameBoard is going to be visible when we have an actual secretWord. So let's first of all set the secretWord to our new secretWord variable. Let's also say that we're going to have a prop called isShown, because that's kind of what we've been using thus far. And we will show the GameBoard if we have a value for secretWord. So we can use secretWord as a truthy or falsy variable there. So now, we just need to start working on our WordSelect components. So let's start by writing that code. We will once again have isShown to determine whether or not this is going to be shown. And it will be shown if we don't have a secretWord, so we'll have that functionality. But then we also need to be able to get the secretWord from this component. And we know that in order to facilitate child-to-parent communication, we need a custom event. So we can have an event kind of like WordSelected, and then we just need to supply a function to handle this event. Now, we could define that function up here, but this is going to be very simple. All we are going to do is set the value of secretWord, so we could just use a simple function expression here. We'll just use an arrow function, so that whenever the word is selected, we will call the setsecretWord function. Then we would pass in that value, and there we go, you would have that functionality all set in. So let's start with our GameBoard. Let's go and define this shown prop here. So let's open up GameBoard, we will add isShown to our props. And all we are going to do is simply set the className for this containing div, based upon if isShown as true or false. So we can just use another simple JavaScript expression here. We don't have to create a variable or anything like that, unless if we needed to manipulate multiple CSS classes. But since we only have one, this is going to be just fine. If this isShown, then we won't have a class, but if it's not, then we will just use the hidden class that we created in the previous lesson. And we will essentially need this same kind of functionality inside of our WordSelect. So let's go ahead and let's create that WordSelect component file. We are going to need state here, so we will once again import useState from React, and then we will have our function for the component. Now, we have two props here, what are they? The first is going to be WordSelected, and then isShown. So let's go ahead and let's destructure those, so that we have them. And then we just need to write our form. Although, since we are going to need to keep track of our states, let's go ahead and create our stateful variable here, which is going to be called secretWord. And then of course, setSecretWord, so that we can set that value. Let's once again initialize this as an empty string, and then we will return our form. So we're going to surround everything with a div element. We'll go ahead and set the className here. It'll be just like we did inside of the GameBoard. So that if it isShown, well, then we won't have a className, otherwise we will have the hidden class. Then everything else will be inside of this div element. So we will have an input element, let's go ahead and set the type to text. But then we need to be able to change the value of our secretWord whenever the value of this input element changes, and we can do that with the onChange event. And we can use just a simple function expression, because all we want to do is set the secretWord to the value of this element. And we have that, thanks to the event object that is passed to the function that is handling this onChange event. So this is just normal JavaScript stuff. We get the target, which is of course this input element, and then its value, and that is going to be it as far as the input element is concerned. So then we can have our button, and this will also be very simple. We want to handle the click event, so that whenever this occurs, all we are going to do is called that wordSelected function. We will pass in the secretWord, because that would already have been updated thanks to the onChange event, and that's it. Then let's have the text of Set Word, and we should be good to go, as far as that is concerned. So let's save the app component. We do need to import that new component, don't we? So let's just copy the line for the GameBoard, we want WordSelect, and that is from WordSelect. So that should be everything, we should be able to go to the browser. Let's do a refresh here, and we should see our WordSelect form. However, we do have an error, can't resolve reat, that should probably be React, what file was that in, word-select, so let's go to word-select, and there it is. One character can throw the whole application off. So let's once again refresh, we have our form now. So do you want to play a game? Let's do something like Jeremy, let's set the word. Okay, the functionality so far is working fine. Let's pick some letters that are not in Jeremy, and we can see that, so far, everything's okay. So now, let's pick the letters, everything works as it should before. And voila, we have our application. So that now, all we have to do to reset everything is just refresh the page. If we want to play another game, we could enter another word, React. Then once again, we can play the game, trying to determine what name or what word it is that we need to guess. And so now, we have a fully functional hangman application written completely with React.

Back to the top