Make a Wordle Clone with React #10 - Showing the Current Guess

Key Takeaways

all right then gang so now we're outputting all the past guesses that we've made into the grid and then we have blank grid rows for any future guesses as well the only problem at the minute is that we're not also outputting the current guess as we type it in before we submit it if we head back to the original wordle game you can see that as we type letters those letters are being imported into the next row the current row for the current guess so that's what we need to do as well and remember we already track the current guess when we use the types and we can see that above the grid right here so all we really need to do is pass that current guess into the row component so that it can use that current guess to output it in the next row along so in the grid component we want to take the current guess which we already have as a prop and we want to pass that into the row component but before we do this let's just think about what we're doing for a minute we want to output the current guess on a single row after the previous guesses from the guesses array have been output right so really we only want to pass the current guess as a prop to the row once for the row that kind of represents the current turn that we're on right now because if we pass it into every row that we output then we're just going to output the current guess on every single row in the grid and we don't want to do that so we want to check what turn we're currently on which we can do by the way because we have that turn prop and then we want to match that against a row number in our grid and where the row number is equal to the current turn number then we want to pass through the current guess prop into the row so let me just code this out first and then we'll go over it again to fully understand it so inside the section where we're mapping through the guesses i'm going to do a quick if check at the top and i'll say if the current turn is triple equal to the index of the guesses array then i want to return a different bit of template in that case now i still want to return a row component so we can still output that and i also still want to pass the key prop into the row which is going to be the index again but this time i also want to pass a current guess prop into the row and the value of that is just going to be the current guess that we have so let me just quickly go through an example here say for example the current turn value is two and that means we've had two previous turns or guesses because the term value starts at zero right and as we map through the guesses array for the first two guesses where the index is zero and then one we just return the standard row component but then when the index is two which matches the turn value which would be two then we return this row instead because this row is for the current turn so we can output the current guess inside it as a user types so we return a row component but also pass through the current guess as well so now only this one row will have that current guess prop value inside it so now we can accept the current guess prop in the row component and this is going to be undefined for five of the rows but it's going to have a value for one of the single rows which represents the current turn so what we want to do after we output the previous guesses is do a check for the current guess prop so we could say if current guess and then open up curly braces and then we could return some kind of template inside here and we would only do this if we have a value for current guess if this is truthy all right but before we return anything i first want to take the current guess which is a string and i want to turn it into a simple array of letters that we can iterate so i'm going to say let letters equal to currentguest.split and invoke that and then as an argument i'm going to pass through an empty string into this and this is basically going to split the word and put each individual letter in its own space in our array called letters so now we can map through that array of letters and we can output a square for each letter so i'm going to return some templates inside parentheses and to begin with i want to return a div with a class of row like the other rows but this time also a class of current as well since this is going to be the current row and then we can use that class to style it differently if we need to later on all right and then we want to map through the letters that we have and we want to output a square for each one so let's say in curly braces letters.map and invoke that and inside that pass a function which will return a template for each letter we also get access to each letter as an argument in that function as well as the index so for each letter we want to have a div which will represent the square and that div needs a key prop which is going to be the index and i'm also going to give it a class called filled because this square on the current row has been filled with a letter right and we might want to style those differently later and then also we need to output the letter itself inside the div all right so now we're mapping through our letters of the current guess and we're outputting a square for each one with the letter inside it but there's one small problem which we're going to see as we preview this in a browser all right then so in the grid you can see i've already had one guess bingo and the solution is pools now i'm going to start typing another guess in a second and what you would expect is the letters to start filling in right here is that right because remember we're mapping through those letters as we get the current guess and we're filling in these boxes but watch what happens i'm going to say something like opens so oh and notice straight away all of the other boxes have gone and we just get this one single box if i type p we get two boxes e three and four and s five and finally it looks fine and if i press enter then it gets colored however when we start writing a letter or rather a word we don't actually get the full row we only get the boxes where there are letters available for the boxes so the problem is that the current guess can be any length between zero and five characters long so say for example it's two characters long that means that we're mapping through an array of length two and only outputting two squares one for each letter when in fact we want to output those two squares with letters in plus three other squares that are going to be empty until we type more letters so in essence we need five squares in the row in total at all times and that would be a combination of squares with letters and then the remaining ones that would be empty but how do we know how many empty squares to output because the length of the current guess is always changing as a user types letters well the number of blank squares is always going to be 5 minus the amount of letters we already have so 5 minus the length of this letters array and we can do something like this pretty easily in react in curly braces down here all we have to do is make an array and then inside it we can say array and then in parentheses 5 minus letter dot length okay or letters.length rather and then we also need to use the spread syntax to spread those elements in our array right here and this is basically going to give us an array of undefined values and the length is always going to be correct if we typed one letter in the current guess then this length is going to be four if we typed three letters in the current guess then this length is going to be 2 and so forth so now for this array we can map through it and output some empty squares so the map function is going to return a template and it's also going to take in the value and the index in the function as well now we don't actually need the value because it's just undefined so we can just name that underscore if we want to but then the index can be used as a key in the div that we're going to return right here and each of these divs is now just going to be an empty square in the row and then hopefully fingers crossed this is also going to work so now at the top here we have squares for the letters in the current guess and at the bottom we have empty squares for the remaining spaces in the current guess all right so now in the browser we can see a previous guess this is the solution and if i start to type now now we no longer see just one or two squares but we see the remaining squares as well that are still empty so this is all working and i could submit this we see four are correct but it goes on to the next row now and i can carry on typing and now this is looking much better