1
00:00:01,110 --> 00:00:03,720
‫In the lecture about component composition,

2
00:00:03,720 --> 00:00:06,480
‫I said that we can use the children prop

3
00:00:06,480 --> 00:00:10,710
‫for composition or an explicitly defined prop.

4
00:00:10,710 --> 00:00:14,313
‫And so let's now quickly explore that second option.

5
00:00:15,630 --> 00:00:19,620
‫So instead of using the children prop in a component

6
00:00:19,620 --> 00:00:23,010
‫and then passing in a component like this,

7
00:00:23,010 --> 00:00:27,060
‫we can use an explicit prop as an alternative.

8
00:00:27,060 --> 00:00:28,650
‫So let me show you what I mean

9
00:00:28,650 --> 00:00:31,653
‫by first commenting out all of this.

10
00:00:32,520 --> 00:00:35,313
‫And then we can go to the box component.

11
00:00:36,210 --> 00:00:39,990
‫So down here, and now instead of accepting children here,

12
00:00:39,990 --> 00:00:44,070
‫let's say we accept something called element,

13
00:00:44,070 --> 00:00:46,410
‫and it can really be called anything.

14
00:00:46,410 --> 00:00:48,963
‫So just L or really whatever.

15
00:00:50,310 --> 00:00:53,140
‫And so now we can go back up here

16
00:00:54,000 --> 00:00:58,260
‫and include the box in the old way.

17
00:00:58,260 --> 00:01:00,330
‫So closing it immediately

18
00:01:00,330 --> 00:01:03,210
‫but then we can specify the element prop.

19
00:01:03,210 --> 00:01:04,860
‫And now here we can then

20
00:01:04,860 --> 00:01:07,953
‫do exactly what we had here.

21
00:01:07,953 --> 00:01:11,280
‫So let's copy that and paste it,

22
00:01:11,280 --> 00:01:15,150
‫give it a save and that worked.

23
00:01:15,150 --> 00:01:17,580
‫So now we have our movie list like here

24
00:01:17,580 --> 00:01:20,490
‫and it was passed into the box component

25
00:01:20,490 --> 00:01:22,200
‫as an explicit prop.

26
00:01:22,200 --> 00:01:25,233
‫In this case, a prop called element.

27
00:01:26,100 --> 00:01:28,080
‫So before what we had here

28
00:01:28,080 --> 00:01:31,260
‫is that we were basically implicitly passing

29
00:01:31,260 --> 00:01:33,840
‫in this component into the box,

30
00:01:33,840 --> 00:01:35,100
‫and then we read it there

31
00:01:35,100 --> 00:01:36,840
‫with the children prop.

32
00:01:36,840 --> 00:01:41,250
‫But here we now basically pass it in more explicitly.

33
00:01:41,250 --> 00:01:44,130
‫So we really say that we have an element prop

34
00:01:44,130 --> 00:01:45,990
‫and then we place whatever

35
00:01:45,990 --> 00:01:48,750
‫we want to pass in right here,

36
00:01:48,750 --> 00:01:51,420
‫so right into the element prop.

37
00:01:51,420 --> 00:01:54,270
‫And this pattern is used in some library,

38
00:01:54,270 --> 00:01:56,580
‫for example, in React Router.

39
00:01:56,580 --> 00:01:57,930
‫And so this is why I thought

40
00:01:57,930 --> 00:01:59,310
‫it might be interesting

41
00:01:59,310 --> 00:02:01,650
‫to show this to you right now.

42
00:02:01,650 --> 00:02:03,250
‫And of course we can do the same

43
00:02:04,620 --> 00:02:07,533
‫with the other box here.

44
00:02:09,000 --> 00:02:13,083
‫So simply saying element and then this.

45
00:02:14,250 --> 00:02:16,350
‫Now here, basically we are passing

46
00:02:16,350 --> 00:02:18,900
‫in a brand new piece of JSX.

47
00:02:18,900 --> 00:02:22,233
‫And so here we now actually need a fragment.

48
00:02:23,280 --> 00:02:25,830
‫Give it a save and there we go.

49
00:02:25,830 --> 00:02:28,740
‫So the app now looks exactly the same as before

50
00:02:28,740 --> 00:02:31,410
‫but we basically passed in an element

51
00:02:31,410 --> 00:02:33,360
‫or multiple elements here

52
00:02:33,360 --> 00:02:35,490
‫instead of using the children prop.

53
00:02:35,490 --> 00:02:37,590
‫But the result is exactly the same.

54
00:02:37,590 --> 00:02:39,810
‫And under the hood, inside React,

55
00:02:39,810 --> 00:02:43,470
‫it should also be basically exactly the same.

56
00:02:43,470 --> 00:02:45,720
‫So this can be a viable pattern

57
00:02:45,720 --> 00:02:48,300
‫in case you need to pass in multiple elements

58
00:02:48,300 --> 00:02:50,550
‫and give them separate names.

59
00:02:50,550 --> 00:02:53,160
‫So that would be a perfectly fine use case

60
00:02:53,160 --> 00:02:56,760
‫for using something like an element prop

61
00:02:56,760 --> 00:02:59,550
‫or really any other prop with any other name

62
00:02:59,550 --> 00:03:02,460
‫instead of the implicit children prop.

63
00:03:02,460 --> 00:03:04,170
‫But in our case,

64
00:03:04,170 --> 00:03:06,210
‫let's go back to what we had before

65
00:03:06,210 --> 00:03:09,540
‫because I think it looks a lot nicer actually

66
00:03:09,540 --> 00:03:12,600
‫and it's also clearly the preferred way

67
00:03:12,600 --> 00:03:15,240
‫of doing this inside React.

68
00:03:15,240 --> 00:03:17,460
‫So this was really just to show you.

69
00:03:17,460 --> 00:03:19,660
‫So I will just delete this entire code

70
00:03:21,960 --> 00:03:24,630
‫and put this one here back,

71
00:03:24,630 --> 00:03:26,700
‫and then let's go to the box

72
00:03:26,700 --> 00:03:28,620
‫and fix it there as well.

73
00:03:28,620 --> 00:03:29,453
‫And by the way,

74
00:03:29,453 --> 00:03:33,240
‫let me show you a very nice trick in VS code

75
00:03:33,240 --> 00:03:37,290
‫which is that if you hover over any component here

76
00:03:37,290 --> 00:03:39,930
‫and then hit command on the Mac

77
00:03:39,930 --> 00:03:41,910
‫or control on Windows,

78
00:03:41,910 --> 00:03:43,590
‫we can actually go right

79
00:03:43,590 --> 00:03:46,020
‫to the definition of the function.

80
00:03:46,020 --> 00:03:48,420
‫So in this case, of the component,

81
00:03:48,420 --> 00:03:50,310
‫so I'm hovering box here

82
00:03:50,310 --> 00:03:53,070
‫then I hit the command key, click,

83
00:03:53,070 --> 00:03:55,560
‫and then I immediately move there.

84
00:03:55,560 --> 00:03:57,780
‫And what's even nicer is that

85
00:03:57,780 --> 00:03:59,610
‫if we do the same down here,

86
00:03:59,610 --> 00:04:02,820
‫so again, hitting the command or the control key,

87
00:04:02,820 --> 00:04:05,103
‫then we go right back up.

88
00:04:06,570 --> 00:04:08,190
‫Well, in this case,

89
00:04:08,190 --> 00:04:10,560
‫somehow it doesn't work,

90
00:04:10,560 --> 00:04:12,240
‫but usually it should.

91
00:04:12,240 --> 00:04:15,120
‫But yeah, what matters is that we can move

92
00:04:15,120 --> 00:04:17,550
‫from where the component is called

93
00:04:17,550 --> 00:04:20,280
‫into the place where it is actually defined.

94
00:04:20,280 --> 00:04:25,280
‫And so now let's change element back to children.

95
00:04:25,320 --> 00:04:28,080
‫And then we have just what we had before.

96
00:04:28,080 --> 00:04:29,760
‫So this was really just to show you

97
00:04:29,760 --> 00:04:33,720
‫an alternative way of using component composition

98
00:04:33,720 --> 00:04:35,610
‫without the children prop.

99
00:04:35,610 --> 00:04:38,850
‫But again, using children is by far

100
00:04:38,850 --> 00:04:41,223
‫the preferred way of doing things.