1
00:00:01,090 --> 00:00:04,960
The last thing I want to show you around props is how we can receive other types of values as well.

2
00:00:05,410 --> 00:00:10,210
So inside of child props right here, let's say maybe we want to communicate down some additional kind

3
00:00:10,210 --> 00:00:12,010
of prop, like a callback function.

4
00:00:12,430 --> 00:00:15,160
Maybe our child components have buttons inside them.

5
00:00:15,160 --> 00:00:18,940
And we want to tell the parent component about whenever a user clicks on those buttons.

6
00:00:19,420 --> 00:00:23,860
So let's try first adding in a button element to child and child as F.C..

7
00:00:24,700 --> 00:00:27,490
I'm going to first begin by giving myself just a little bit of space.

8
00:00:28,640 --> 00:00:30,080
I'll then add in a button.

9
00:00:33,740 --> 00:00:34,700
Like me.

10
00:00:37,230 --> 00:00:43,470
I'll add on a unclick prop and then we'll assume that we're going to receive some kind of unclick prop.

11
00:00:44,160 --> 00:00:48,060
I'm going to put in unclick like so I'm going to copy that button.

12
00:00:49,530 --> 00:00:51,530
Down to the second component as well.

13
00:00:54,080 --> 00:00:58,430
Now, I'm going to make sure that I try to structure out of our props, object some kind of unclick

14
00:00:58,430 --> 00:01:00,680
function or put in unclick.

15
00:01:01,890 --> 00:01:08,730
And on Click right away, we, of course, get an error message because child props is not expected

16
00:01:08,730 --> 00:01:11,070
to ever have any kind of on click property.

17
00:01:11,520 --> 00:01:16,380
So to fix that up, we could very easily go back up to our interface, add in on click, and then say

18
00:01:16,380 --> 00:01:21,260
that this should be some kind of function because it's an unclick kind of callback.

19
00:01:21,270 --> 00:01:26,130
We might not want to have any kind of arguments that maybe it might not need to return any kind of value

20
00:01:26,130 --> 00:01:31,020
either, but might annotate its return type is void, which just means I do not really expect to get

21
00:01:31,020 --> 00:01:33,390
back any kind of usable value from unclick.

22
00:01:34,480 --> 00:01:40,390
So if we save that, we can now very easily see that we've got an air coming from parents if we go back

23
00:01:40,390 --> 00:01:45,880
over there, not unsurprisingly, we've got an air from child right here that says we have to provide

24
00:01:45,880 --> 00:01:47,070
an unclick prop.

25
00:01:47,830 --> 00:01:49,420
We could very easily put in unclick.

26
00:01:51,280 --> 00:01:56,800
But in a function and maybe if right now, just to a console log that says looked like so.

27
00:01:57,950 --> 00:01:59,480
And that appears to fix the Arab.

28
00:02:00,620 --> 00:02:05,480
All right, so again, just a very quick example of how we can add in other types of values to a proper

29
00:02:05,690 --> 00:02:06,830
interface definition.

30
00:02:08,100 --> 00:02:12,450
The very last thing I was going to cover that in the next video because but because this one has been

31
00:02:12,450 --> 00:02:15,060
very fast, let's just go over this one last little topic.

32
00:02:15,390 --> 00:02:20,520
You might recall that we have these two different types of ways of associating a props interface with

33
00:02:20,520 --> 00:02:21,090
a component.

34
00:02:21,330 --> 00:02:25,500
So this is kind of method one right here, which was a little bit easier and faster to put together,

35
00:02:25,500 --> 00:02:26,520
but has some downsides.

36
00:02:26,770 --> 00:02:28,880
And we've also got method to down here as well.

37
00:02:29,340 --> 00:02:33,750
There's one other benefit to method number two down here that I just want to mention very quickly.

38
00:02:34,470 --> 00:02:39,270
Back inside of my parent component, I'm going to find where we currently are defining that child component

39
00:02:39,270 --> 00:02:39,750
right here.

40
00:02:40,410 --> 00:02:46,830
And I'm going to expand this thing to have both an opening tag and a closing tag as well.

41
00:02:47,750 --> 00:02:50,700
Now, as soon as I do that, you'll notice we start to get an error message.

42
00:02:51,360 --> 00:02:53,250
The error message, if you mouseover says.

43
00:02:54,220 --> 00:03:00,250
This right here, that is the arguments, the props we are providing to the child component is not assignable

44
00:03:00,250 --> 00:03:01,930
to something, something, something.

45
00:03:01,930 --> 00:03:06,820
And it says specifically property children does not exist on type something, something, something.

46
00:03:07,630 --> 00:03:13,060
A quick reminder on what really happens when you write out a custom component using an opening tag and

47
00:03:13,060 --> 00:03:14,160
a closing tag as well.

48
00:03:14,740 --> 00:03:19,630
If you put any content in between these two tags right here, you get some kind of text or some kind

49
00:03:19,630 --> 00:03:25,150
of component, let's say maybe some component called app or something similar, all that content will

50
00:03:25,150 --> 00:03:28,510
be provided to your component as a prop called Children.

51
00:03:28,840 --> 00:03:31,010
This is an automatic feature in react.

52
00:03:31,390 --> 00:03:34,110
This has nothing to do with TypeScript or anything like that.

53
00:03:34,900 --> 00:03:39,280
So if right now I'm going to just put in some arbitrary text like that right there.

54
00:03:40,680 --> 00:03:45,450
So, again, by default, this text right here would show up inside of our child component as a prop

55
00:03:45,450 --> 00:03:51,090
called Children, and the reason we are seeing an error, because our child definition right here says

56
00:03:51,090 --> 00:03:54,000
that we are going to receive some type of child props.

57
00:03:54,270 --> 00:03:59,040
And there's no mention inside of fear whatsoever of any kind of children prop or anything like that.

58
00:03:59,680 --> 00:04:04,890
So whenever we make use of child right now, the expectation, according to the interface we put together,

59
00:04:05,130 --> 00:04:08,350
is that there will never be any children whatsoever.

60
00:04:08,970 --> 00:04:10,760
Right now we are providing the children.

61
00:04:10,770 --> 00:04:13,080
And so naturally we end up with an error message.

62
00:04:14,000 --> 00:04:19,970
The nice thing about using this second form of definition or type annotation for a functional component

63
00:04:20,209 --> 00:04:24,200
is that it automatically takes into account that idea of receiving children.

64
00:04:24,890 --> 00:04:26,360
Let me show you an example of this.

65
00:04:26,900 --> 00:04:32,480
Back inside of parents, rather than trying to import child right here, I'm going to import our other

66
00:04:32,480 --> 00:04:34,760
component, which we called child as F.C..

67
00:04:36,730 --> 00:04:38,500
On an update, our.

68
00:04:43,510 --> 00:04:46,400
And then you'll notice, oh, I need a capital C on there.

69
00:04:46,420 --> 00:04:49,270
My mistake, you'll notice that your message goes away very quickly.

70
00:04:49,550 --> 00:04:56,050
That is because Child C, which is annotated using this react functional component interface, does

71
00:04:56,050 --> 00:04:59,890
in fact expect to receive eight children from now.

72
00:04:59,890 --> 00:05:01,210
We could receive children.

73
00:05:02,110 --> 00:05:07,420
On our list of properties right here, and we could place children somewhere inside of our component

74
00:05:07,420 --> 00:05:12,630
like so and we get no airs whatsoever, so that is another upside to using this approach.

75
00:05:12,910 --> 00:05:17,650
You can define components that will receive children if you use the first approach.

76
00:05:18,610 --> 00:05:24,100
You cannot directly receive children unless you manually add an annotation to your interface right here,

77
00:05:24,460 --> 00:05:29,020
so we could have added in something like children and then put in some kind of typewrite there to say,

78
00:05:29,170 --> 00:05:30,880
hey, we do expect to receive children.

79
00:05:31,150 --> 00:05:33,700
But of course, that does require just a little bit of extra work.

80
00:05:34,570 --> 00:05:39,700
All right, so we've now seen some upsides and downsides of both approaches now that we've seen and

81
00:05:39,700 --> 00:05:44,020
gotten a pretty good idea of how we can annotate props with TypeScript and react.

82
00:05:44,330 --> 00:05:46,960
Let's move on to our next major topic in the next video.