3.3 Iterating Over Components

We're doing pretty well so far, but the next thing that I wanna be able to do is I wanna start to introduce the concept of taking this target word and breaking it up into individual letters that the user's ultimately going to have to guess. Right now we're just displaying the target word on the game boards, and that's really not gonna get it done. So we're gonna introduce a couple of concepts in this lesson, we're going to add in a new component, and then we're going to split this word up a little bit and display to the end user, and then I'm going to get into a little bit of styling probably in the next lesson, but I'm gonna show you how we're gonna break this thing up and take advantage once again of some of the flexibility of these components as well as the power of JSX. So as I said, what I want to do is I want to take this target word that I'm passing into my gameboard. And I wanna actually split this up, I don't wanna just display this word because I wanna be able to split it up into a series of boxes that are gonna be displayed to the end user. And they're gonna be blank, you're not gonna see anything until the user correctly guesses a letter, that's found in the word and then we'll show that individual letter. So the way that we're really gonna be able to do that is we have to take each letter in that target word, and really make it its own components so that we can add functionality to each of those letters individually. So let's start doing that now. I'm gonna begin by creating another class and we'll call this Letter, and this is gonna extend the react component class again. Let's create a render function. And this is gonna be pretty simplistic for right now we're gonna have this be a span and the value of the span and I forgot to do my return statement and the value of that span what's gonna show up in there is simply gonna be a letter and that letter is gonna get passed in via an attribute just like we've done before. And then we're going to display it in here via these curly brackets by using our props and we're just gonna say that this is gonna have a value. So a letter is gonna have a value. So what I wanna do now down in my game board is I wanna take this target word and I wanna split it up. I wanna split it up into individual letters. And instead of just displaying the word, I wanna display a collection or a list of individual letter components. So let's go ahead and do that now. Now I'm not too concerned about the JavaScript portion of this course, you're more here to learn about how to interact with components and how to use them. So feel free to use whatever sort of JavaScript you like to use ES 2015. You wanna use new features or old features. You wanna use maps on collections or arrays you wanna use for loops or whatever, it's completely up to you. I'm gonna mix things up here a little bit and do a little bit of everything, just so you can see that it works. But really, at the end of the day, that's definitely up to you. So what I'm gonna do now, inside of my render function for the time being. In a little bit, we'll start creating some individual functions and splitting out functionality and all that sort of good stuff. But for now, we're just gonna do it inside this render function. So what I wanna do as I said before, is I want to split this target word up into individual letters and then I want to create a letter component for each one of those and then display that collection of letter components. So how can we do that? Well, there's a bunch of different ways. What I like to do is I like to use a for each on an array, and the array that I'm going to use is this.props.targetword. Now, that's a string, but I can use the split function to split that into an array of individual letters. So now, I'm gonna iterate over each of those individual letters and for each of those letters, so each one of those is gonna be a letter, I want to do something with it. So right now, let's just say I want to create a collections. So we'll say, let letters be equal to an empty array. And then for each iteration though these letters, I'm simply going to go into letters and then I'm going to push. And what I'm I going to push? Well, this is what I said before because we're in JSX we kind of get a lot of cool things that we can do here. I don't have to do anything fancy, I don't have to do any string interpolation or string formatting or whatever you whatever have you I can simply add in JSX to this array. So, I can simply say that I want this to be an element I want to push an element that is gonna be the letter component. And I want to set its value equal to in curly brackets, that letter value that we're iterating over, just like that. Now that's pretty cool and pretty powerful if you think about it, so I don't have to do any sort of crazy formatting to push a string that's gonna then be rendered into the DOM. I can simply use JSX right here, just as I've done before, and push that component onto that letter's collection. So if I want to set a value of an attribute inside an element like you're seeing right here I simply use those curly brackets again and so then inside of here that is going to then be executed, and the value of that letter variable, which is gonna be right here for each letter, is gonna put in as the value of that letter component. So that's pretty cool. So let's go ahead and save that. So now I have this letters array full of all these letter components and I wanna put that down here inside my game board. So, I don't think we're gonna need this H2 in here anymore. So we're gonna get rid of that. We're gonna replace this with a div which is gonna be a wrapping div cuz I'm sure we'll be putting more stuff in there eventually. And really so what I have here is a bunch of spans is all that really is. So I'm simply going to display letters. Now once again because I want to display what's being held inside the letters variable, I want to use the curly brackets to actually display that inside of a div. So now if I were to save that, the interesting thing is if I hop over here to Chrome, you're going to see that it truly does display and that's great. But there is a little bit of a problem here. The problem is that every time you use a looping functionality inside of react and then create individual child elements, that way, you're gonna get a warning. So right here, as you can see, I have opened up the developer tools inside of Chrome. You can see I get a warning when I try to do this. And the problem here is that each child in an array or iterator should have a unique key property. Now this is a warning, technically it's not truly an error, but it's being displayed as an error. That every time we iterate over an element that way, we should be setting a key so that react knows when something is updated or changed. It knows how to get a hold of those uniquely. So, how do we handle that? Well, all we really have to do is come back over here to our loop that we were using this for each right here, and let's go ahead and add a key to this letter component. Now, there is a couple different ways, once again, you can do this. You can do in many different ways, but one thing that you can do here is I can use the index on this for each as well. So one of the other nice things that you get using a for each loop like this is you not only get each individual value that is stored within that array, but you also get its individual index. So I can use that now and I can simply come into my letter and I can set the key attribute to be index. Now, I could use letter, but what happens if I use a word like Derek that has two e's in it? Each of the key values needs to be a unique value. So I'm simply going to be using their index because I know each one of those index values will be unique. So let's go ahead and save that will pop back over to Chrome. This has re-rendered you now see Derek here and you don't see that error anymore. And if I were to go inside of route inside of div and I go inside this subdiv right here, you're gonna see that I have five spans in here. And each of those spans has a letter of the target word that I passed in. So, now I have each of those individual letter components being rendered individually, which is pretty nice because now I can see all those letters there but right now, they look like an individual word. So in the next lesson I will show you how we can introduce the concept of styling so I can make this look a little bit more like an actual game board for my hangman clone.