1
00:00:02,310 --> 00:00:10,050
Now before we finish up this module, let's go back to some lists and to some scrollable content because

2
00:00:10,050 --> 00:00:12,670
in this application, we have no such content at all

3
00:00:12,690 --> 00:00:18,570
and actually, it's crucial for you to understand how to work with lists and what some of the special

4
00:00:18,570 --> 00:00:19,920
quirks are

5
00:00:19,920 --> 00:00:25,380
when it comes to lists. So let's say here we want to log the previous guesses the computer made, we

6
00:00:25,380 --> 00:00:32,060
want to log that down here below our plus and minus button in this white empty space here.

7
00:00:32,310 --> 00:00:38,910
For that, we of course need to register any guess made by the computer and then output it in the list.

8
00:00:38,910 --> 00:00:41,880
So in the game screen, let's start with registering that.

9
00:00:41,970 --> 00:00:44,610
Currently we're just counting rounds here,

10
00:00:44,610 --> 00:00:49,620
the goal however has to be that we don't just count rounds but that we also saved the rounds,

11
00:00:49,650 --> 00:00:52,770
so we saved a guess that was made in each round

12
00:00:52,920 --> 00:00:59,520
and to achieve that here in our rounds state, we can simply manage an array instead of a number and I'll

13
00:00:59,520 --> 00:01:03,510
name this past guesses to be really clear about what's in there

14
00:01:03,690 --> 00:01:06,690
and this is therefore named set past guesses.

15
00:01:06,690 --> 00:01:13,390
So now the goal is to add a new guess here to this array whenever we generate a new random number,

16
00:01:13,390 --> 00:01:19,530
so here in the next guess handler. There where we set the rounds, instead of setting the rounds like this

17
00:01:19,560 --> 00:01:23,660
which we're not managing anymore, we have to set our past guesses

18
00:01:23,790 --> 00:01:30,420
and there we need to use our previous guesses and actually add a new guess here.

19
00:01:30,420 --> 00:01:37,540
Now for that, we can use that function form here where we get the curPastGuesses which is a bit of

20
00:01:37,540 --> 00:01:42,790
a strange name but which simply means that this is our current state and we want to update that or it's

21
00:01:42,790 --> 00:01:49,810
our latest state to be precise and we want to update that and we want to update it by returning a new

22
00:01:50,020 --> 00:01:55,720
array which will be our new state and that of course should take our current past guesses into account

23
00:01:56,020 --> 00:01:59,680
and then add new guesses there.

24
00:01:59,690 --> 00:02:04,280
Now we can either add a new guess at the end of that list or at the beginning and I'll actually add it

25
00:02:04,280 --> 00:02:09,590
at the beginning so that our most recent guess is always at the top of the list when we later render

26
00:02:09,590 --> 00:02:10,520
it to the screen.

27
00:02:11,210 --> 00:02:17,600
So here, we can add next number which is our new current guess we're generating here and that's what

28
00:02:17,600 --> 00:02:25,440
we have to add here as an item, right? With that, we're adding new items to this array with every guess.

29
00:02:25,470 --> 00:02:28,760
Now don't forget that we also start with a guess though,

30
00:02:28,770 --> 00:02:31,290
we generate an initial guess here,

31
00:02:31,290 --> 00:02:36,670
I want to start with that guess in the list and therefore, we have to add it to the list here,

32
00:02:36,720 --> 00:02:44,040
so I'll extract it from our use state function call here and create a new constant, initial guess which

33
00:02:44,040 --> 00:02:51,910
is this randomly generated number and now it's this initial guess which I add here to use state and

34
00:02:51,910 --> 00:02:57,850
it's also the initial guess I add as a first element to that array in our past guesses, use state

35
00:02:57,850 --> 00:02:59,200
initialization.

36
00:02:59,200 --> 00:03:06,260
Now don't forget that use state as all this code here of course reruns whenever this component re-renders

37
00:03:06,340 --> 00:03:12,670
but the way use state works is such that React detects that a state for this component has already been

38
00:03:12,670 --> 00:03:13,350
initialized,

39
00:03:13,780 --> 00:03:19,210
so it will only set the state to this initial guess for the very first time this component renders and

40
00:03:19,210 --> 00:03:21,400
not for subsequent renders. There

41
00:03:21,400 --> 00:03:28,120
indeed, this initial guess will be recreated but it won't actually be used because of that detached

42
00:03:28,210 --> 00:03:33,060
state handling where React finds out that we already have a state.

43
00:03:33,070 --> 00:03:38,080
So with that, we're initializing this, we're initializing our guess here in that list as well and we're

44
00:03:38,380 --> 00:03:43,090
adding a new guess to the list at the bottom here. With all of that,

45
00:03:43,240 --> 00:03:46,480
we should have some past guesses which we can output in a list

46
00:03:46,780 --> 00:03:52,300
and now here we have two ways of outputting this, with a FlatList or with the scroll view and I'll again

47
00:03:52,300 --> 00:03:54,660
start with a scroll view for that.

48
00:03:54,730 --> 00:04:02,320
So here below the card, I'll add a scroll view and for that, you need to import the scroll view from React

49
00:04:02,320 --> 00:04:02,890
Native,

50
00:04:03,010 --> 00:04:04,820
so let's do that here, scroll

51
00:04:04,870 --> 00:04:10,060
view, import it from React Native and output that below the list so that this is a scrollable content

52
00:04:10,420 --> 00:04:13,190
because in there, I'll have my dynamic content,

53
00:04:13,210 --> 00:04:18,620
I'll use my past guesses and map this into a list of components.

54
00:04:18,640 --> 00:04:20,550
So here, I'll have my individual guess

55
00:04:20,560 --> 00:04:26,140
so to say and this should now return a component inside of this map function and such a guess component

56
00:04:26,140 --> 00:04:32,350
could be a view let's say, with a text in there where I simply output the guess,

57
00:04:32,350 --> 00:04:39,880
so here I render this guess I'm getting and since I just add my guesses here directly like this to the

58
00:04:39,880 --> 00:04:45,670
array, the guess I have in there is just the guess number and I can simply output it like this here.

59
00:04:47,150 --> 00:04:53,600
Now you learned that for items which we're mapping like this, you also need to add a key and we could

60
00:04:53,600 --> 00:04:57,340
use our guess here as a key if we would be guaranteed to be unique

61
00:04:57,350 --> 00:05:04,010
but with our current logic, it actually isn't because in our current logic, generate random between actually

62
00:05:04,010 --> 00:05:11,300
generates a new random number where the upper boundary, this high value here, is excluded but the lower

63
00:05:11,300 --> 00:05:17,190
boundary is included, so we can get this lower boundary as a new random value.

64
00:05:17,300 --> 00:05:23,660
Now the downside of this is that here where we're setting our new lower boundary, we're setting this

65
00:05:23,660 --> 00:05:30,020
to the current guess which means this can be repeated in a future random number and we actually saw

66
00:05:30,020 --> 00:05:31,120
this in this module too,

67
00:05:31,130 --> 00:05:37,010
there sometimes, the computer guess a number which was guessed a couple of rounds earlier already.

68
00:05:37,070 --> 00:05:42,900
It's not a huge problem but now it is because now we need our guess to be guaranteed, to be unique

69
00:05:43,190 --> 00:05:49,460
and the fix is simple though, we can simply add one here when we set our new lower boundary because by

70
00:05:49,460 --> 00:05:56,930
adding one here, we ensure that the new lower boundary which is included in the random number generation

71
00:05:57,410 --> 00:06:01,270
is actually one higher than the current guess which was false,

72
00:06:01,280 --> 00:06:02,910
otherwise we wouldn't have gotten here.

73
00:06:02,930 --> 00:06:09,020
So now we're setting a new lower boundary which can be generated in the future but which we didn't generate

74
00:06:09,020 --> 00:06:09,950
before.

75
00:06:09,950 --> 00:06:13,100
So this is a little fix in the logic which doesn't hurt any ways

76
00:06:13,100 --> 00:06:18,560
and it's especially important if you plan on using the guess as a unique key here.

77
00:06:18,640 --> 00:06:20,110
So with that,

78
00:06:20,110 --> 00:06:21,670
let's see whether that works.

79
00:06:21,730 --> 00:06:26,190
Let's save that and let's give it a try

80
00:06:26,190 --> 00:06:27,610
here on iOS,

81
00:06:27,750 --> 00:06:31,830
start the game and we see our initial guess, 57,

82
00:06:31,830 --> 00:06:37,890
it's not nicely formatted but we see it here. Now 57 is too high, if I say lower, we see the new guess

83
00:06:37,920 --> 00:06:43,670
on top of the list and I lied there and that seems to work.

84
00:06:43,740 --> 00:06:49,470
Now of course we're getting an error when the game is over because there, we're trying to get our rounds

85
00:06:49,980 --> 00:06:53,730
and we're not managing this as a state anymore. So we'll have to fix that

86
00:06:53,910 --> 00:06:56,590
but outputting the list works.

87
00:06:56,670 --> 00:06:59,140
Now let's fix our rounds error

88
00:06:59,160 --> 00:07:08,580
we're getting, that is simply coming from useEffect where I forward rounds to onGameOver. There

89
00:07:08,580 --> 00:07:13,120
I in the end need to forward the number of rounds it took the computer to guess our number.

90
00:07:13,140 --> 00:07:17,030
Previously we had a rounds variable here, a round state,

91
00:07:17,040 --> 00:07:23,010
now we just have past guesses which is an array, so we can't forward past guesses like this because on game

92
00:07:23,040 --> 00:07:24,660
over in the end needs a number

93
00:07:24,660 --> 00:07:30,440
but of course we can forward the length of past guesses which is just the number of rounds it took the

94
00:07:30,450 --> 00:07:31,520
computer.

95
00:07:31,530 --> 00:07:37,920
So with that, if we do this, now we should actually be able to also finish the game successfully.

96
00:07:37,980 --> 00:07:43,440
If we give this a quick try here and solve the game,

97
00:07:43,440 --> 00:07:43,790
yes,

98
00:07:43,860 --> 00:07:44,900
that works.

99
00:07:45,030 --> 00:07:47,340
So now we have that working,

100
00:07:47,340 --> 00:07:51,750
now let's turn our heads towards that scroll view and the list items there again

101
00:07:51,750 --> 00:07:54,210
and let's make sure that we have the right styling there.