3.2 Iterating Over Components

In this lesson we are going to start developing our game board which is going to contain all of the different pieces about the game itself. So if we look at the browser we will have a grid of the letters that we need to guess. And then we will have another grid of buttons that we can click on in order to guess the letters. So there's going to be essentially two pieces to the game board but those two pieces are going to be made up of other pieces. So we're going to start with the game board itself and then just build Load out from there. So instead of our app component let's go ahead and let's include where we would want the game board to be. So I think that inside of our app component we'll just create a div and then we will have our game board. Now in order for our application to work we need a secret word, this is the word that we are going to have to guess. And eventually we want the user to supply this but for right now we just need the ability to work with a secret word. So I'm going to pass it as a prop later on, we will probably change that. And the secret word itself doesn't matter. I'll just use React here and this will be fine. We will have our game board and any other functionality that we might need outside of the game board we can include later. I can't really think of anything off the top of my head but if we get to that point we'll get to that point. So let's go ahead and create this GameBoard so let's create a new file. And we'll just call it gameboard.js. And it's going to look very similar to the other components that we have written. We are going to export a function that is going to accept props, right now. We just have the secret words we'll go ahead and destructure that so that we can have easy access to it. And then we just want to return some markup right now. So let's just have a div and we will output the secret word here. Now, the reason why I'm doing this is just so that we can make sure that everything is up and running. Everything's connected as it should so that we can then go on and start building out the gameboard even more. Now we do need to import the GameBoard so let's go ahead and do that inside of our app component and then we will be ready to go. As far as continuing on the file name was simply game board. So if we go to the browser, we can see, voila, we have our application. Now, I'm going to pull up the developer tools. And let's inspect what we have as far as react is concerned. We have our div element, that is the app component because we can see the welcome to hangman. And then the do you wanna play a game then we have the div element that contains the gameboard. And I guess really this containing div might be unnecessary but we'll leave it for now. We can always change markup later on. So now what I want to do is take the word that we are providing the secret word and we want to build out a grid essentially so that each letter can be guessed. And then eventually what we'll do is hide the letters and then whenever a guest letter is correct we will then show that letter. So the game board is going to have two pieces it's going to have the letter grid which is going to be four. The guessed word or the secret word, and then we will have a button grid for the buttons. So let's start with the letter grid. So let's create another file. We'll call it letter.grid.js, but for right now we don't really know what we want to put in here. So let's go back to gameboard and we have our div elements here. So now we will just have a letter grid, we could pass on the secret word prop. Because the letter grid needs to know what word that we are gonna be trying to guess. So we will have a secret word prop for the letter grid as well and we will just pass that on down. Now one of the really cool things about react is when the value of secret word changes. Then react is going to cause everything that is working with the secret word to essentially re-render itself. So this is part of where the reactiveness of react comes into play Delay. So we have this letter grid that's going to have a secret word. So really let's just copy this code and let's paste it inside of letter grid. And we of course don't have a letter grid here. But then the question becomes how do we build a grid based upon the letters in the word. Well a word is really nothing more than an array of characters. So one thing that we could do is take our word like secretword and then we could split it using an empty string as the splitting character. That's going to split the string into individual characters. So what we will end up with is an array that contains the individual characters in each element. So it would look something like this. And once we have an array, we can just use something that is going to Iterate over or loop over that array. So that we can then generate the markup that we need to display in the browser. Now there are many ways that we can iterate over an array and create something we could use just a typical for loop. We could use the for each method on the array, we could use the map method. Mean there's a variety of options that we can choose what I am going to do is what you would typically see in a normal react application. So I'm going to create a variable called Letters and we are going to call split. Because we want to work with our letters as an array. But then I'm going to call the map method. Now if you're not familiar with map it basically transforms an array Into another array. So we are going to start with an array of letters what we are going to end up with is an array of span elements that contain the letter.. And we will do that just, by this we will pass in, a callback function that the map method needs. It's going to execute this function on every element in the array, and we are simply going to return a span element that contains our letter. So that it would look like this. So then we will end up with an array of span elements inside of this letters variable so that we could just simply output that here letters. And so now all we need to do inside of our gameboard is import that file. So I'm going to copy where we are importing GameBoard inside of app. I'm just going to paste that inside of the GameBoard so that we don't have to rewrite all of this. Of course, we will need to change the name of the component that we are using, letter grid as well as the name of the file, which was letter grid. But with that in place, we should be able to go back to the browser it looks well, let's refresh. Sometimes we have to refresh, in that case, there was a compile error, but everything was fine. So we just needed to refresh so that it would load everything fresh. And we can see that it looks the same, but if we inspect the string react here we are going to see that we have our div that is the gameboard. And then inside we will have those individual span elements. So this is one of the really powerful things about using JSX because we can start using XML elements as actual values in our code. Whereas in the past, we would have to kind of use strings so that we would have the span element. And then we would want to concatenate the value of the letter that we were working with. And then we would concatenate the closing span tag. We don't have to do that anymore. We can directly build the markup that we want to use because JSX allows us to do that. And this pattern right here where we take an array called map in order to transform that array. Into an array of what we essentially have our react components that's very common if you look at any project you're going to see that pattern. So, it's a good idea to become familiar with this pattern because you will use it a lot. Now in the next lesson we're going to change this span component into our own custom component. We'll call it a letter and the reason is very simple we want letters to have kind of their own functionality and maintain their own state.