Now before we finish up this module, let's go back to some lists and to some scrollable content because
in this application, we have no such content at all
and actually, it's crucial for you to understand how to work with lists and what some of the special
quirks are
when it comes to lists. So let's say here we want to log the previous guesses the computer made, we
want to log that down here below our plus and minus button in this white empty space here.
For that, we of course need to register any guess made by the computer and then output it in the list.
So in the game screen, let's start with registering that.
Currently we're just counting rounds here,
the goal however has to be that we don't just count rounds but that we also saved the rounds,
so we saved a guess that was made in each round
and to achieve that here in our rounds state, we can simply manage an array instead of a number and I'll
name this past guesses to be really clear about what's in there
and this is therefore named set past guesses.
So now the goal is to add a new guess here to this array whenever we generate a new random number,
so here in the next guess handler. There where we set the rounds, instead of setting the rounds like this
which we're not managing anymore, we have to set our past guesses
and there we need to use our previous guesses and actually add a new guess here.
Now for that, we can use that function form here where we get the curPastGuesses which is a bit of
a strange name but which simply means that this is our current state and we want to update that or it's
our latest state to be precise and we want to update that and we want to update it by returning a new
array which will be our new state and that of course should take our current past guesses into account
and then add new guesses there.
Now we can either add a new guess at the end of that list or at the beginning and I'll actually add it
at the beginning so that our most recent guess is always at the top of the list when we later render
it to the screen.
So here, we can add next number which is our new current guess we're generating here and that's what
we have to add here as an item, right? With that, we're adding new items to this array with every guess.
Now don't forget that we also start with a guess though,
we generate an initial guess here,
I want to start with that guess in the list and therefore, we have to add it to the list here,
so I'll extract it from our use state function call here and create a new constant, initial guess which
is this randomly generated number and now it's this initial guess which I add here to use state and
it's also the initial guess I add as a first element to that array in our past guesses, use state
initialization.
Now don't forget that use state as all this code here of course reruns whenever this component re-renders
but the way use state works is such that React detects that a state for this component has already been
initialized,
so it will only set the state to this initial guess for the very first time this component renders and
not for subsequent renders. There
indeed, this initial guess will be recreated but it won't actually be used because of that detached
state handling where React finds out that we already have a state.
So with that, we're initializing this, we're initializing our guess here in that list as well and we're
adding a new guess to the list at the bottom here. With all of that,
we should have some past guesses which we can output in a list
and now here we have two ways of outputting this, with a FlatList or with the scroll view and I'll again
start with a scroll view for that.
So here below the card, I'll add a scroll view and for that, you need to import the scroll view from React
Native,
so let's do that here, scroll
view, import it from React Native and output that below the list so that this is a scrollable content
because in there, I'll have my dynamic content,
I'll use my past guesses and map this into a list of components.
So here, I'll have my individual guess
so to say and this should now return a component inside of this map function and such a guess component
could be a view let's say, with a text in there where I simply output the guess,
so here I render this guess I'm getting and since I just add my guesses here directly like this to the
array, the guess I have in there is just the guess number and I can simply output it like this here.
Now you learned that for items which we're mapping like this, you also need to add a key and we could
use our guess here as a key if we would be guaranteed to be unique
but with our current logic, it actually isn't because in our current logic, generate random between actually
generates a new random number where the upper boundary, this high value here, is excluded but the lower
boundary is included, so we can get this lower boundary as a new random value.
Now the downside of this is that here where we're setting our new lower boundary, we're setting this
to the current guess which means this can be repeated in a future random number and we actually saw
this in this module too,
there sometimes, the computer guess a number which was guessed a couple of rounds earlier already.
It's not a huge problem but now it is because now we need our guess to be guaranteed, to be unique
and the fix is simple though, we can simply add one here when we set our new lower boundary because by
adding one here, we ensure that the new lower boundary which is included in the random number generation
is actually one higher than the current guess which was false,
otherwise we wouldn't have gotten here.
So now we're setting a new lower boundary which can be generated in the future but which we didn't generate
before.
So this is a little fix in the logic which doesn't hurt any ways
and it's especially important if you plan on using the guess as a unique key here.
So with that,
let's see whether that works.
Let's save that and let's give it a try
here on iOS,
start the game and we see our initial guess, 57,
it's not nicely formatted but we see it here. Now 57 is too high, if I say lower, we see the new guess
on top of the list and I lied there and that seems to work.
Now of course we're getting an error when the game is over because there, we're trying to get our rounds
and we're not managing this as a state anymore. So we'll have to fix that
but outputting the list works.
Now let's fix our rounds error
we're getting, that is simply coming from useEffect where I forward rounds to onGameOver. There
I in the end need to forward the number of rounds it took the computer to guess our number.
Previously we had a rounds variable here, a round state,
now we just have past guesses which is an array, so we can't forward past guesses like this because on game
over in the end needs a number
but of course we can forward the length of past guesses which is just the number of rounds it took the
computer.
So with that, if we do this, now we should actually be able to also finish the game successfully.
If we give this a quick try here and solve the game,
yes,
that works.
So now we have that working,
now let's turn our heads towards that scroll view and the list items there again
and let's make sure that we have the right styling there.