1
00:00:01,080 --> 00:00:02,880
‫So we used composition

2
00:00:02,880 --> 00:00:05,327
‫in order to solve a prop drilling problem

3
00:00:05,327 --> 00:00:08,718
‫and to build our layout in a way nicer way.

4
00:00:08,718 --> 00:00:13,718
‫And so now let's use it to build a reusable box component.

5
00:00:15,870 --> 00:00:19,774
‫So we already converted the list box component here

6
00:00:19,774 --> 00:00:22,110
‫to use the children prop

7
00:00:22,110 --> 00:00:25,455
‫in order to then basically fill that slot, so that hole

8
00:00:25,455 --> 00:00:29,638
‫with this component that we pass in as a child component.

9
00:00:29,638 --> 00:00:31,980
‫And so now we could go ahead

10
00:00:31,980 --> 00:00:35,888
‫and do the exact same thing with the watched box.

11
00:00:35,888 --> 00:00:37,863
‫So let's actually go there.

12
00:00:39,030 --> 00:00:44,030
‫So watched box and it's right here.

13
00:00:44,054 --> 00:00:46,833
‫However, if we take a look at this component right here

14
00:00:46,833 --> 00:00:51,270
‫it is very, very similar to that other box.

15
00:00:51,270 --> 00:00:55,410
‫So to that list box.

16
00:00:55,410 --> 00:00:59,020
‫So basically both of them have this state here of isOpen

17
00:00:59,910 --> 00:01:02,930
‫then they have a div with the class of box,

18
00:01:02,930 --> 00:01:04,530
‫and then they have this button

19
00:01:04,530 --> 00:01:05,979
‫which is also exactly the same.

20
00:01:05,979 --> 00:01:07,500
‫And in the end,

21
00:01:07,500 --> 00:01:09,506
‫they will render their children conditionally.

22
00:01:09,506 --> 00:01:12,663
‫So based on the isOpen state.

23
00:01:13,920 --> 00:01:15,780
‫So again, if we go here

24
00:01:15,780 --> 00:01:19,350
‫we will see that it is basically exactly the same.

25
00:01:19,350 --> 00:01:21,780
‫This one here has this watched state,

26
00:01:21,780 --> 00:01:24,390
‫but we can easily move that somewhere else.

27
00:01:24,390 --> 00:01:27,025
‫So what I'm saying is that both the watched box

28
00:01:27,025 --> 00:01:30,900
‫and the movie box have this same state here.

29
00:01:30,900 --> 00:01:34,830
‫Basically they have this same class name, this same button

30
00:01:34,830 --> 00:01:37,050
‫and then they render something conditionally

31
00:01:37,050 --> 00:01:38,940
‫based on the open state.

32
00:01:38,940 --> 00:01:41,280
‫And so this is an amazing candidate

33
00:01:41,280 --> 00:01:44,068
‫to create a reusable component.

34
00:01:44,068 --> 00:01:46,530
‫So let's do that

35
00:01:46,530 --> 00:01:49,756
‫and let's do it separately actually of the other ones.

36
00:01:49,756 --> 00:01:53,190
‫And I will simply call it box.

37
00:01:53,190 --> 00:01:56,760
‫Let me, just to make this a bit easier,

38
00:01:56,760 --> 00:01:59,682
‫cut this one and paste it close to the other one.

39
00:01:59,682 --> 00:02:03,719
‫And then we can see how similar they actually are.

40
00:02:03,719 --> 00:02:05,640
‫And you know what?

41
00:02:05,640 --> 00:02:08,010
‫I will actually not create a new one,

42
00:02:08,010 --> 00:02:10,440
‫but I will immediately convert this one here

43
00:02:10,440 --> 00:02:14,520
‫because the list box is basically already what we want.

44
00:02:14,520 --> 00:02:16,629
‫So let's just re-call it box.

45
00:02:16,629 --> 00:02:19,732
‫Then here we no longer need,

46
00:02:19,732 --> 00:02:22,323
‫like this name here of isOpen1,

47
00:02:23,790 --> 00:02:26,430
‫and setIsOpen1.

48
00:02:26,430 --> 00:02:29,920
‫Let's change that here, change that here, and here.

49
00:02:29,920 --> 00:02:32,310
‫And that's already it.

50
00:02:32,310 --> 00:02:35,052
‫So we no longer need this watched box.

51
00:02:35,052 --> 00:02:37,953
‫So let's completely comment that one out.

52
00:02:40,066 --> 00:02:43,390
‫And so, let's now use this box

53
00:02:44,306 --> 00:02:48,393
‫here inside of this list box that we're using.

54
00:02:50,040 --> 00:02:54,393
‫So box right here, let's remove that one for now.

55
00:02:55,434 --> 00:02:57,513
‫And box here as well.

56
00:02:58,500 --> 00:03:03,500
‫And well for some, ah, I had the wrong one here open still.

57
00:03:04,207 --> 00:03:07,020
‫So just to make sure, let's reload.

58
00:03:07,020 --> 00:03:10,590
‫And so this part still looks exactly the same as before.

59
00:03:10,590 --> 00:03:14,043
‫And so now we can use this reusable box.

60
00:03:18,846 --> 00:03:20,971
‫And simply pass in that content

61
00:03:20,971 --> 00:03:25,380
‫that we passed before into the watched box.

62
00:03:25,380 --> 00:03:28,560
‫Which is basically this, right?

63
00:03:28,560 --> 00:03:33,560
‫So copy that and let's paste that here.

64
00:03:34,586 --> 00:03:38,760
‫And now we get the problem, which I was saying before.

65
00:03:38,760 --> 00:03:42,083
‫Which is that this watched array here now needs to be moved

66
00:03:42,083 --> 00:03:44,253
‫onto this component.

67
00:03:45,237 --> 00:03:49,800
‫So this state that we had before can no longer live here,

68
00:03:49,800 --> 00:03:53,793
‫but it couldn't anyway, as we will see in a future section.

69
00:03:55,290 --> 00:03:57,693
‫So we would have to place this here anyway.

70
00:03:59,131 --> 00:04:01,740
‫So yeah, this fixes the problem.

71
00:04:01,740 --> 00:04:06,740
‫And we shouldn't even need this right here.

72
00:04:06,749 --> 00:04:08,430
‫And so there we go.

73
00:04:08,430 --> 00:04:12,284
‫We just created ourselves a reusable box component.

74
00:04:12,284 --> 00:04:16,609
‫And the state now works, of course, still in both.

75
00:04:16,609 --> 00:04:20,604
‫And so we didn't have to rewrite that same state logic

76
00:04:20,604 --> 00:04:24,030
‫and the same button here in both of these lists

77
00:04:24,030 --> 00:04:28,006
‫because again, they were basically exactly the same.

78
00:04:28,006 --> 00:04:32,909
‫And so what we did, again, was to create this reusable box

79
00:04:32,909 --> 00:04:37,379
‫and in there allow for any children to be passed in.

80
00:04:37,379 --> 00:04:39,708
‫So we created like this empty hole here

81
00:04:39,708 --> 00:04:43,511
‫ready to receive any components that we want

82
00:04:43,511 --> 00:04:45,915
‫which in this case is the movies list.

83
00:04:45,915 --> 00:04:48,857
‫And in this case it's the watched summary

84
00:04:48,857 --> 00:04:51,600
‫and the watched list.

85
00:04:51,600 --> 00:04:54,164
‫So here we have just one children component

86
00:04:54,164 --> 00:04:55,980
‫and here we have two.

87
00:04:55,980 --> 00:04:57,390
‫But no matter what,

88
00:04:57,390 --> 00:05:00,813
‫our box always works for all of these situations.

89
00:05:00,813 --> 00:05:04,560
‫And so again, all of this logic here,

90
00:05:04,560 --> 00:05:07,879
‫so this button here with setting the open state

91
00:05:07,879 --> 00:05:10,099
‫could just be reused in this way.

92
00:05:10,099 --> 00:05:13,440
‫And on top of that, as a bonus

93
00:05:13,440 --> 00:05:15,675
‫we made our application tree here

94
00:05:15,675 --> 00:05:18,685
‫even more explicit in the app component.

95
00:05:18,685 --> 00:05:22,766
‫So now it really is very clear what exactly is happening

96
00:05:22,766 --> 00:05:24,163
‫in the application.

97
00:05:24,163 --> 00:05:27,750
‫Just by looking at this one component,

98
00:05:27,750 --> 00:05:29,610
‫we can immediately see the entire structure

99
00:05:29,610 --> 00:05:31,303
‫of the application.

100
00:05:31,303 --> 00:05:34,140
‫Which is really, really helpful.

101
00:05:34,140 --> 00:05:35,397
‫So this is really great.

102
00:05:35,397 --> 00:05:36,960
‫And we're moving

103
00:05:36,960 --> 00:05:39,259
‫into some more intermediate React territory.

104
00:05:39,259 --> 00:05:41,700
‫But that makes complete sense

105
00:05:41,700 --> 00:05:43,642
‫because we are already in part two,

106
00:05:43,642 --> 00:05:46,477
‫which is exactly for intermediate React.

107
00:05:46,477 --> 00:05:48,744
‫So it's great that at this point

108
00:05:48,744 --> 00:05:51,612
‫we are already able to do something like this,

109
00:05:51,612 --> 00:05:53,503
‫which is already way closer

110
00:05:53,503 --> 00:05:57,037
‫to how real world React applications look like.

111
00:05:57,037 --> 00:05:59,676
‫So really, really keep this technique

112
00:05:59,676 --> 00:06:02,040
‫of component composition in mind.

113
00:06:02,040 --> 00:06:06,900
‫Both for building better layouts, for solving prop drilling

114
00:06:06,900 --> 00:06:10,912
‫and also for creating reusable components like this one.

115
00:06:10,912 --> 00:06:14,186
‫So hopefully you saw how powerful this is.

116
00:06:14,186 --> 00:06:17,088
‫And so as you start writing your own code,

117
00:06:17,088 --> 00:06:20,246
‫be on the watch out for whenever you can do this.

118
00:06:20,246 --> 00:06:24,014
‫So whenever you can create some reusable components

119
00:06:24,014 --> 00:06:27,933
‫in your own code using this amazing technique.