1
00:00:01,110 --> 00:00:04,140
‫Let's now build another reusable component

2
00:00:04,140 --> 00:00:07,143
‫by leveraging the children prop once again.

3
00:00:08,550 --> 00:00:10,530
‫And this time, let's say that we wanted

4
00:00:10,530 --> 00:00:13,380
‫a component to display a message.

5
00:00:13,380 --> 00:00:17,940
‫And so that message will always be this paragraph element.

6
00:00:17,940 --> 00:00:21,480
‫It will also always contain this step here.

7
00:00:21,480 --> 00:00:24,423
‫For example: in an H three element,

8
00:00:25,980 --> 00:00:29,850
‫and then it will contain in an H three element.

9
00:00:29,850 --> 00:00:32,280
‫So like this and then it will contain

10
00:00:32,280 --> 00:00:33,810
‫something that we pass in.

11
00:00:33,810 --> 00:00:37,593
‫So, some content such as this message right here.

12
00:00:38,850 --> 00:00:41,760
‫So, let's once again, use the children prop

13
00:00:41,760 --> 00:00:44,853
‫in order to create such a component.

14
00:00:46,230 --> 00:00:51,230
‫So this component, I'm going to call "The Step Message."

15
00:00:52,920 --> 00:00:54,273
‫So, step message.

16
00:00:57,120 --> 00:01:00,153
‫And then I will for now, just copy this.

17
00:01:03,300 --> 00:01:05,400
‫So, copy all of this.

18
00:01:05,400 --> 00:01:08,490
‫And so as I said we want basically

19
00:01:08,490 --> 00:01:11,070
‫always to display the current step,

20
00:01:11,070 --> 00:01:14,520
‫and then here whatever content that we get.

21
00:01:14,520 --> 00:01:17,670
‫So we need to receive two props here.

22
00:01:17,670 --> 00:01:19,413
‫First is this step.

23
00:01:21,720 --> 00:01:24,780
‫And then again, the children prop.

24
00:01:24,780 --> 00:01:26,820
‫Which each component, remember,

25
00:01:26,820 --> 00:01:28,860
‫automatically receives as soon

26
00:01:28,860 --> 00:01:31,950
‫as we pass in some content between the opening

27
00:01:31,950 --> 00:01:34,530
‫and the closing tag when we call.

28
00:01:34,530 --> 00:01:36,303
‫So, when we use the component.

29
00:01:37,920 --> 00:01:41,520
‫So, now we got the step, and then right after that step

30
00:01:41,520 --> 00:01:45,003
‫let's simply display whatever children that we receive.

31
00:01:46,050 --> 00:01:49,110
‫So, this part here is then that empty hole

32
00:01:49,110 --> 00:01:51,540
‫that we talked about in the last lecture.

33
00:01:51,540 --> 00:01:54,450
‫And this empty hole can then of course be filled

34
00:01:54,450 --> 00:01:56,250
‫with whatever we pass in.

35
00:01:56,250 --> 00:01:58,500
‫And again, whatever we pass in

36
00:01:58,500 --> 00:02:02,913
‫between the opening and the closing tag of step message.

37
00:02:04,560 --> 00:02:05,910
‫So, here in the button

38
00:02:05,910 --> 00:02:10,200
‫that hole was basically all the content of the button.

39
00:02:10,200 --> 00:02:12,750
‫So, the button here only displays

40
00:02:12,750 --> 00:02:14,820
‫exactly what was passed in.

41
00:02:14,820 --> 00:02:17,160
‫But here we will also, in addition,

42
00:02:17,160 --> 00:02:19,170
‫always display this part.

43
00:02:19,170 --> 00:02:21,963
‫So, the H three with the step itself.

44
00:02:23,520 --> 00:02:26,610
‫Okay, and now let's...

45
00:02:26,610 --> 00:02:27,663
‫Where is that?

46
00:02:28,770 --> 00:02:29,603
‫Ah, yeah.

47
00:02:29,603 --> 00:02:32,470
‫So, let's now replace this message right here

48
00:02:33,600 --> 00:02:35,013
‫with a step message.

49
00:02:37,350 --> 00:02:38,520
‫Now the step, of course,

50
00:02:38,520 --> 00:02:42,153
‫we have to pass in just like any other prop.

51
00:02:44,160 --> 00:02:46,323
‫Not span, step.

52
00:02:48,120 --> 00:02:49,050
‫Okay.

53
00:02:49,050 --> 00:02:52,200
‫And now here between the opening and closing tag

54
00:02:52,200 --> 00:02:56,073
‫we basically define the children prop.

55
00:02:57,300 --> 00:03:00,060
‫So this here will then become the children prop.

56
00:03:00,060 --> 00:03:02,373
‫And if you get rid of all this,

57
00:03:03,450 --> 00:03:04,850
‫then let's see what happens.

58
00:03:05,820 --> 00:03:07,803
‫Well, nothing really happened.

59
00:03:09,330 --> 00:03:10,590
‫Ah, of course.

60
00:03:10,590 --> 00:03:13,560
‫I mean, we didn't really return anything here.

61
00:03:13,560 --> 00:03:17,910
‫So we just wrote some JSX, but we didn't return it.

62
00:03:17,910 --> 00:03:19,800
‫We also get some warning here

63
00:03:19,800 --> 00:03:23,160
‫that the H three cannot be inside of a P.

64
00:03:23,160 --> 00:03:26,553
‫So, let's then replace this P just with a div.

65
00:03:29,310 --> 00:03:30,390
‫Give it a save.

66
00:03:30,390 --> 00:03:32,580
‫And there it is.

67
00:03:32,580 --> 00:03:36,480
‫Beautiful. So it always displays the current step.

68
00:03:36,480 --> 00:03:39,030
‫And of course the message that we had before.

69
00:03:39,030 --> 00:03:42,873
‫Because we passed that in right here,

70
00:03:42,873 --> 00:03:46,890
‫into that is exactly what we had before as well.

71
00:03:46,890 --> 00:03:50,283
‫And now of course, we could reuse this anywhere we wanted.

72
00:03:51,330 --> 00:03:53,790
‫So let's say that here after the steps,

73
00:03:53,790 --> 00:03:56,520
‫we wanted somewhere else in the app

74
00:03:56,520 --> 00:03:58,323
‫also to have a step message.

75
00:03:59,280 --> 00:04:01,263
‫Let's say step number one.

76
00:04:02,820 --> 00:04:07,593
‫And then here, maybe the content is pass in content.

77
00:04:09,210 --> 00:04:13,590
‫Let's do another paragraph with some emoji here.

78
00:04:13,590 --> 00:04:16,473
‫Does not matter at all what we have here.

79
00:04:18,690 --> 00:04:22,020
‫And so then here we have step one like this,

80
00:04:22,020 --> 00:04:24,540
‫and we can do as many as we want.

81
00:04:24,540 --> 00:04:26,490
‫So let's copy paste that.

82
00:04:26,490 --> 00:04:28,263
‫Let's say for example, step two,

83
00:04:30,870 --> 00:04:35,283
‫read children prop,

84
00:04:36,970 --> 00:04:38,733
‫and then maybe some other emoji.

85
00:04:40,350 --> 00:04:41,610
‫Give it a save.

86
00:04:41,610 --> 00:04:45,690
‫And so now we have again created a reusable component here

87
00:04:45,690 --> 00:04:48,240
‫that we can use anywhere in our application,

88
00:04:48,240 --> 00:04:50,640
‫and give it any content that we want.

89
00:04:50,640 --> 00:04:52,950
‫And it will always, as you see,

90
00:04:52,950 --> 00:04:55,980
‫display this step here with the number that we gave it,

91
00:04:55,980 --> 00:04:59,850
‫and then whatever content that we passed into it.

92
00:04:59,850 --> 00:05:02,523
‫So into the component itself.

93
00:05:05,880 --> 00:05:07,080
‫Let's come back here.

94
00:05:07,080 --> 00:05:09,090
‫And here, I just thought that

95
00:05:09,090 --> 00:05:11,823
‫maybe we could use our button again.

96
00:05:12,960 --> 00:05:13,793
‫So, why not?

97
00:05:15,240 --> 00:05:17,730
‫And then it makes even more sense to have these

98
00:05:17,730 --> 00:05:20,020
‫different props because now we can

99
00:05:20,970 --> 00:05:23,170
‫basically customize them in a different way.

100
00:05:24,660 --> 00:05:27,870
‫So, let's say here we wanted a different background color

101
00:05:27,870 --> 00:05:30,990
‫and a different text color.

102
00:05:30,990 --> 00:05:34,623
‫These should be strings like this.

103
00:05:35,880 --> 00:05:39,930
‫Ah, and we're missing the on click event handler.

104
00:05:39,930 --> 00:05:43,650
‫And so here, let's just define an inline function.

105
00:05:43,650 --> 00:05:47,220
‫And the emphasis is again, on defining a function.

106
00:05:47,220 --> 00:05:50,853
‫So here we need to pass in a function, not call a function.

107
00:05:51,750 --> 00:05:54,990
‫Let's just alert something here.

108
00:05:54,990 --> 00:05:56,430
‫It doesn't really matter.

109
00:05:56,430 --> 00:06:01,380
‫So let's say, "Learn How To,"

110
00:06:01,380 --> 00:06:05,613
‫and then we can just use this here.

111
00:06:06,870 --> 00:06:10,893
‫Just so that it's related to each of the steps.

112
00:06:12,480 --> 00:06:15,780
‫So we opened the button, then we have the closing tag,

113
00:06:15,780 --> 00:06:18,513
‫and now we can pass whatever we want in here.

114
00:06:20,580 --> 00:06:23,310
‫And of course, this thing that we pass

115
00:06:23,310 --> 00:06:25,263
‫can also just be regular text.

116
00:06:26,700 --> 00:06:28,080
‫So give it a save.

117
00:06:28,080 --> 00:06:30,093
‫And there is our button.

118
00:06:31,710 --> 00:06:32,790
‫It still works.

119
00:06:32,790 --> 00:06:36,600
‫So, we are successfully passing in the on click handler.

120
00:06:36,600 --> 00:06:38,190
‫And then using it.

121
00:06:38,190 --> 00:06:39,960
‫The styling looks a little bit off,

122
00:06:39,960 --> 00:06:43,413
‫but I guess that's because I styled those one here.

123
00:06:45,300 --> 00:06:46,600
‫Well, let's see, actually.

124
00:06:47,820 --> 00:06:49,820
‫Just to make sure there's nothing wrong.

125
00:06:52,440 --> 00:06:55,470
‫Now, in fact, these buttons get these styles

126
00:06:55,470 --> 00:06:58,140
‫because they are a children of some element

127
00:06:58,140 --> 00:06:59,673
‫with the buttons class.

128
00:07:01,980 --> 00:07:04,680
‫Now right? But that doesn't really matter.

129
00:07:04,680 --> 00:07:06,120
‫We could, of course, wrap this

130
00:07:06,120 --> 00:07:11,120
‫in a div with the class of buttons that might work,

131
00:07:13,140 --> 00:07:16,230
‫or maybe that will then mess up some other styling.

132
00:07:16,230 --> 00:07:18,210
‫Well, that didn't really work.

133
00:07:18,210 --> 00:07:22,440
‫But also because it's buttons. Yeah, nice.

134
00:07:22,440 --> 00:07:24,300
‫That looks better actually.

135
00:07:24,300 --> 00:07:26,520
‫And so with this, we can see that we were

136
00:07:26,520 --> 00:07:30,630
‫really able to customize, once again, our button here.

137
00:07:30,630 --> 00:07:34,410
‫Some parts with normal props like these three,

138
00:07:34,410 --> 00:07:38,340
‫and then the content itself here with the children prop.

139
00:07:38,340 --> 00:07:41,280
‫So, if we always just want to pass in a string

140
00:07:41,280 --> 00:07:44,250
‫this could, of course, also be a normal prop.

141
00:07:44,250 --> 00:07:47,160
‫But since sometimes we want some other content

142
00:07:47,160 --> 00:07:52,160
‫like here with some actual JSX, like this span element here.

143
00:07:52,740 --> 00:07:54,780
‫Well, then we should really take advantage

144
00:07:54,780 --> 00:07:56,820
‫of the children prop.

145
00:07:56,820 --> 00:08:00,000
‫And now to really drive this message home

146
00:08:00,000 --> 00:08:02,670
‫so that you really understand how to work

147
00:08:02,670 --> 00:08:04,740
‫with this important children prop.

148
00:08:04,740 --> 00:08:08,520
‫Let's go back to our accordion component exercise

149
00:08:08,520 --> 00:08:10,263
‫and use it there as well.