FREELessons: 14Length: 1.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.4 Generating More Components

In this lesson, we are gonna start developing our button grid which is going to be very similar to the letter grid. Except that there are some noticeable differences, primarily with functionality, which we will get to later on. For right now, we just want to have the button grid so that we can get started with that. And since there are some similarities between the letter grid and the button grid, let's just copy the letter grid and let's use that as a basis for the button grid. We of course need to change the name of that file to button grid. And then from here on out, we need to get rid of the prompts because the buttons aren't going to know what the secretWord is. If we don't need to know what the guessedLetters are, at least as far as the button grid is concerned. And we also don't need the letter component, however, we are going to have a button component. So let's just comment this out so that we can change it later to import the appropriate component. And then we are going to start kind of the same way, in that we need to generate all of our buttons. And the easiest way to do that is to just contain all of the letters inside an array. So that we can then generate all of our buttons. So we will use the map method and we want to work with the letter and the index because we need to set the key for each one of these components. And we are simply just going to create a button component with an uppercase B. Which is not the same as the lowercase b, which would be just a typical HTML button. So we will have our button and we can supply the value which is going to be the letter. And then for right now we will just add the key and that will be it, that is going to be the index. There are some other things that we will need to add, on but that's for the functionality that's going to come later. So that now we just need to output the buttons. And that will be our button grid for now. Let's go ahead and define this button component. So let's create a new file. And I guess we could start with the letter component as a basis. So let's open up that file, let's just copy, and then we will paste that inside of button. And the value we need isShown. Now we could take the approach of exactly what we did with the letter component. In that the button grid would determine whether or not to show or hide the button component. The idea is that inside of the browser we are going to have our grid of buttons and whenever we click on a button to guess a letter, it's going to hide that button, so that we can't guess it again. So we could implement that functionality the same way as we did the letters. However I think it would be just much easier if the functionality is inside of this button component because we could just do that with CSS. The main issue with the letter is that we could hide the letters with CSS. However that would mean that the letter value itself would be in the DOM and in this case the way that it is currently implemented that information is not in the DOM. So people can't cheat that way. So for right now the only thing that our button component needs is the value prop. And we will simply output the button element and then we will have the value. So we will just get rid of everything else here. We do need to import button inside of the button grid. So let's go ahead and do that. We will uncomment out the first line, we will import button from button. And then we also need to import the button grid inside of the game board. So let's go there and let's add the button grid. And then as far as the markup is concerned, there's really nothing that we need except for the element itself. So we will have simply ButtonGrid, we will self-close that and everything should be okay. So let's go to the browser and there we go we have our letter grid and then we have our button grid. Now of course this isn't very nice because, well, we don't want just a single row of buttons like this. So we would want to add some styling so that we can at least somewhat control how everything is displayed. And that would be a great thing to cover in the next lesson.

Back to the top