1
00:00:01,680 --> 00:00:06,300
Let's first begin by adding in or finishing up some functionality inside of our component, so we need

2
00:00:06,300 --> 00:00:10,560
to make sure that whenever a user clicks on our button, we take the current value of name and then

3
00:00:10,560 --> 00:00:13,610
add it into some new maybe array piece of state.

4
00:00:13,650 --> 00:00:18,420
So maybe we should have an array of strings that stores the entire list of guests or essentially all

5
00:00:18,420 --> 00:00:20,280
the different names we have collected over time.

6
00:00:20,990 --> 00:00:23,610
So I'm going to add in a new piece of state up here to get us started.

7
00:00:24,340 --> 00:00:25,710
I'll call it guess.

8
00:00:26,310 --> 00:00:27,360
Also get set.

9
00:00:27,360 --> 00:00:28,020
Guess.

10
00:00:29,210 --> 00:00:34,130
I'll do you straight and I'm going to initialize its value to be an empty array, because we're eventually

11
00:00:34,130 --> 00:00:37,130
going to have an array of guests that we want to invite to our party.

12
00:00:38,240 --> 00:00:42,110
Then inside of a button right here, I'll add on and on unclick.

13
00:00:43,390 --> 00:00:47,980
We could definitely define an inline function right here to invoke, but just to make our lives a little

14
00:00:47,980 --> 00:00:48,520
bit easier.

15
00:00:48,670 --> 00:00:51,610
Let's instead define unclick up here.

16
00:00:53,320 --> 00:00:57,970
Just to make it a little bit easier to write all the logic, we need to add in a new guest world and

17
00:00:57,970 --> 00:01:00,310
make sure that I provide unclick right there.

18
00:01:01,850 --> 00:01:06,830
OK, so now whenever a user clicks on that button, we want to take whatever text a user has written

19
00:01:06,830 --> 00:01:12,060
into this input right here, and we want to add that as a new string into our guests array.

20
00:01:12,740 --> 00:01:16,790
After that, we should then probably clear out the current value of the input as well, essentially

21
00:01:16,790 --> 00:01:19,760
empty it entirely because that guest has been added in.

22
00:01:20,270 --> 00:01:21,530
Let's take care of that step first.

23
00:01:22,010 --> 00:01:27,860
So inside of unclick, I will call that name and then put an empty string that's going to cause that

24
00:01:27,860 --> 00:01:29,000
input to empty out.

25
00:01:29,930 --> 00:01:36,540
Next up, we'll take the current value of name and add it to our guests array by calling set guests.

26
00:01:37,230 --> 00:01:39,290
So I will call set guests.

27
00:01:40,470 --> 00:01:46,860
If we just tried to add in or just set gas to simply name like, so that will delete or essentially

28
00:01:46,860 --> 00:01:49,590
remove any previous guests we have added into our app.

29
00:01:50,820 --> 00:01:54,880
So rather than doing that, I'm going to add in square brackets, dot, dot, dot.

30
00:01:55,390 --> 00:01:55,950
Yes.

31
00:01:56,310 --> 00:01:57,900
And then name on top of that.

32
00:01:59,120 --> 00:02:02,540
Now for getting the air for just a moment, just to make sure this line of code right here is really

33
00:02:02,540 --> 00:02:02,900
clear.

34
00:02:03,020 --> 00:02:05,090
This means we're going to take the current array of guests.

35
00:02:05,340 --> 00:02:10,400
We're going to take all the different strings out of it, add it to a new array, and then add on name

36
00:02:10,400 --> 00:02:11,400
to the very end.

37
00:02:12,110 --> 00:02:16,640
Now, the code we have inside of here would normally be absolutely just fine JavaScript code.

38
00:02:16,790 --> 00:02:18,710
Nothing wrong with what we have written so far.

39
00:02:19,100 --> 00:02:22,550
But you could see in the typescript world, well, something is not quite going right.

40
00:02:23,040 --> 00:02:26,930
So if we mouseover this air, we're going to very quickly see a little nasty error message.

41
00:02:27,110 --> 00:02:30,920
And this is where we start to need to apply a little bit of knowledge around.

42
00:02:30,920 --> 00:02:31,490
TypeScript.

43
00:02:32,060 --> 00:02:38,600
So the error message itself says type array of string is not assignable to type array of never.

44
00:02:39,270 --> 00:02:40,520
What's going on here?

45
00:02:41,090 --> 00:02:41,450
All right.

46
00:02:41,480 --> 00:02:44,300
Let's do a little bit deeper dive here and really figure out what's going on.

47
00:02:45,240 --> 00:02:50,700
Whenever you define a new piece of state inside of a component using the you state hook, you provide

48
00:02:50,910 --> 00:02:53,160
a default value for that piece of state.

49
00:02:54,260 --> 00:02:59,600
In this case, we have provided a default value for state, for name of empty string and for guests,

50
00:02:59,600 --> 00:03:01,040
we've provided an empty array.

51
00:03:01,610 --> 00:03:08,870
TypeScript is going to try to use type inference to guess what the type of state is in the case of name

52
00:03:09,440 --> 00:03:12,770
typescript is going to say, OK, you provided a string right here.

53
00:03:12,980 --> 00:03:18,140
That means that the type of name is probably going to be a string in this case if we mouseover name.

54
00:03:18,140 --> 00:03:19,690
You can see that is definitely the case.

55
00:03:20,270 --> 00:03:22,760
So TypeScript has applied type inference right here.

56
00:03:23,060 --> 00:03:24,200
Absolutely correctly.

57
00:03:24,900 --> 00:03:29,780
However, in the case of guess right here, TypeScript has seen that there is an empty array and has

58
00:03:29,780 --> 00:03:33,650
no idea what type of value should be stored inside that array.

59
00:03:34,160 --> 00:03:39,560
So by default, when TypeScript tries to apply type inference to figure out what guess is, we mouseover

60
00:03:39,560 --> 00:03:41,870
guess it says never right there.

61
00:03:42,170 --> 00:03:44,870
And you can essentially interpret never right here as meaning.

62
00:03:44,870 --> 00:03:50,450
TypeScript has no idea what kind of value is going to be present inside that array, or more precisely

63
00:03:50,450 --> 00:03:55,160
in this case, because we put in an empty array without any type typescript assumes that that is going

64
00:03:55,160 --> 00:03:57,140
to be an array that is forever empty.

65
00:03:58,550 --> 00:04:04,310
So in either scenario, clearly not what we want, TypeScript, has not been able to figure out or guess

66
00:04:04,310 --> 00:04:08,410
what the type of guess is going to be, do we need to give it a little bit of a hint?

67
00:04:08,450 --> 00:04:15,590
We need to tell TypeScript what kind of value is going to be assigned to this piece of state to do so.

68
00:04:15,590 --> 00:04:16,279
Here's the trick.

69
00:04:16,550 --> 00:04:21,920
Right after you state, we're going to put in a set of those angle brackets and then side there we're

70
00:04:21,920 --> 00:04:25,590
going to describe what type this piece of state is going to be.

71
00:04:26,120 --> 00:04:28,520
So in our case, it's going to be an array of strings.

72
00:04:28,640 --> 00:04:31,520
So put in string brackets like so.

73
00:04:32,960 --> 00:04:37,380
As you guess, that's going to tell TypeScript that our best piece of state is going to be an array

74
00:04:37,380 --> 00:04:43,100
of strings and at that point their messages go away, we can now mouseover guess and we're told guess

75
00:04:43,110 --> 00:04:45,180
is going to eventually be an array of strings.

76
00:04:45,780 --> 00:04:46,680
And that's pretty much it.

77
00:04:47,850 --> 00:04:48,780
Now, if we save this.

78
00:04:49,980 --> 00:04:51,540
And go test out our application.

79
00:04:54,180 --> 00:04:54,930
I'll refresh.

80
00:04:55,840 --> 00:04:57,430
And now I should be able to type in here.

81
00:04:58,400 --> 00:05:00,650
Sarah or whoever else had guessed?

82
00:05:01,130 --> 00:05:05,660
Oh, that's right, we have not actually added in the iteration to print out the list of guests right

83
00:05:05,660 --> 00:05:05,840
there.

84
00:05:05,870 --> 00:05:06,740
Still need to add that in.

85
00:05:07,130 --> 00:05:10,100
But I think you can imagine, well, that part won't be so bad.

86
00:05:10,970 --> 00:05:15,650
OK, so the takeaway here as that whenever we are making use of state inside of react, we can put in

87
00:05:15,650 --> 00:05:16,820
a default value.

88
00:05:17,360 --> 00:05:21,370
If TypeScript can figure out what that type of value is, everything is going to work out OK.

89
00:05:21,890 --> 00:05:26,540
But if we put in any kind of default value right here where type inference doesn't work, then we need

90
00:05:26,540 --> 00:05:31,460
to be a little bit more clear and provide an actual type for that piece of state by placing it inside

91
00:05:31,460 --> 00:05:32,510
those angled brackets.

92
00:05:33,890 --> 00:05:38,810
Well, let's take a quick pause, come back to next video and wrap up by rendering out our list of guests

93
00:05:39,080 --> 00:05:40,790
down right above the input element.