1 00:00:01,470 --> 00:00:02,303 Instructor: In the last section, 2 00:00:02,303 --> 00:00:03,780 we spent some time putting together 3 00:00:03,780 --> 00:00:06,150 some code for our first higher order component, 4 00:00:06,150 --> 00:00:09,180 but we didn't really talk about anything that was going on, 5 00:00:09,180 --> 00:00:11,670 even though there was a lot of weird code on the screen. 6 00:00:11,670 --> 00:00:14,160 So, let's take some time to discuss exactly 7 00:00:14,160 --> 00:00:15,000 what's happening here 8 00:00:15,000 --> 00:00:17,880 and how we might use this higher order component. 9 00:00:17,880 --> 00:00:20,340 So, we're gonna approach this from two different angles. 10 00:00:20,340 --> 00:00:23,280 First, we're gonna put some kind of pseudo code down here, 11 00:00:23,280 --> 00:00:26,190 at the bottom of our file, to show how we might make use 12 00:00:26,190 --> 00:00:27,960 of this higher order component. 13 00:00:27,960 --> 00:00:31,200 And then, as a kind of separate angle, we're gonna look 14 00:00:31,200 --> 00:00:32,820 at a diagram that helps reiterate 15 00:00:32,820 --> 00:00:36,240 what the higher order component is doing for us. 16 00:00:36,240 --> 00:00:38,490 So, let's first start off with writing some 17 00:00:38,490 --> 00:00:40,320 pseudo code that's gonna kinda demonstrate 18 00:00:40,320 --> 00:00:43,440 how we might use this higher order component, right here. 19 00:00:43,440 --> 00:00:44,700 So, I'm gonna put a comment here 20 00:00:44,700 --> 00:00:47,040 and um, everything we're gonna write below this, 21 00:00:47,040 --> 00:00:48,420 we're going to eventually delete. 22 00:00:48,420 --> 00:00:50,580 So, I encourage you to maybe focus a little bit more 23 00:00:50,580 --> 00:00:52,860 on the discussion as opposed to, uh, 24 00:00:52,860 --> 00:00:53,970 writing down any of the code. 25 00:00:53,970 --> 00:00:55,710 But absolutely, whatever you feel like, 26 00:00:55,710 --> 00:00:58,410 whatever works best for you, uh, go for it. 27 00:00:58,410 --> 00:01:02,100 So we're gonna say, uh, in some other location. 28 00:01:02,100 --> 00:01:04,983 So, basically not in this file. 29 00:01:06,510 --> 00:01:10,170 We want to use this higher order component. 30 00:01:10,170 --> 00:01:11,550 So, the question instantly becomes 31 00:01:11,550 --> 00:01:12,780 how do we make use of this thing? 32 00:01:12,780 --> 00:01:14,190 How do we actually use this, 33 00:01:14,190 --> 00:01:16,350 what appears to be a function, here? 34 00:01:16,350 --> 00:01:19,100 So, let's write some code to help, help demonstrate it. 35 00:01:19,950 --> 00:01:22,380 In this other file, that we're gonna pretend 36 00:01:22,380 --> 00:01:26,433 exists down here, I'm going to import authentication. 37 00:01:27,870 --> 00:01:31,590 And authentication, right here is going to be this function, 38 00:01:31,590 --> 00:01:32,880 this higher order component. 39 00:01:32,880 --> 00:01:34,680 So, I'm gonna put a comment on here. 40 00:01:35,730 --> 00:01:37,740 This is my higher order component 41 00:01:37,740 --> 00:01:41,700 and I'm also going to import resources, 42 00:01:41,700 --> 00:01:46,700 which is the component that I want to wrap. 43 00:01:47,130 --> 00:01:49,410 So, I've now got my higher order component 44 00:01:49,410 --> 00:01:51,660 and I've got my component that I want to wrap 45 00:01:51,660 --> 00:01:52,953 with authentication. 46 00:01:53,790 --> 00:01:56,220 So to make use of this higher order component, 47 00:01:56,220 --> 00:01:58,290 it's actually pretty straightforward. 48 00:01:58,290 --> 00:02:00,810 The syntax in here is a little bit weird or a little bit, 49 00:02:00,810 --> 00:02:03,540 you know, not what we might expect, but actually making use 50 00:02:03,540 --> 00:02:05,943 of it is actually pretty straightforward. 51 00:02:07,200 --> 00:02:10,320 So, down here on line 19, I'm gonna write 52 00:02:10,320 --> 00:02:15,067 const ComposedComponent equals AuthenticationResources. 53 00:02:21,030 --> 00:02:23,220 This is all that's really going on, behind the scenes 54 00:02:23,220 --> 00:02:26,100 when we want to make use of the higher order component. 55 00:02:26,100 --> 00:02:30,603 Then, the final step would be in some say render method. 56 00:02:32,100 --> 00:02:35,580 Write something like composed component. 57 00:02:35,580 --> 00:02:38,730 So now, I'm not rendering resources here, 58 00:02:38,730 --> 00:02:41,670 I'm rendering the composed component, 59 00:02:41,670 --> 00:02:43,860 the composition of the authentication 60 00:02:43,860 --> 00:02:47,640 higher order component, and the resources component. 61 00:02:47,640 --> 00:02:50,100 So in practice, this is the, almost the exact code 62 00:02:50,100 --> 00:02:51,660 that we're gonna write somewhere else. 63 00:02:51,660 --> 00:02:53,400 Uh, we are not going, we're going to, you know, 64 00:02:53,400 --> 00:02:56,400 actually put on our complete import statements. 65 00:02:56,400 --> 00:02:57,840 We'll probably use a better variable name 66 00:02:57,840 --> 00:02:59,760 than this right here, but you can can kind of get the idea 67 00:02:59,760 --> 00:03:01,410 of what we're going for. 68 00:03:01,410 --> 00:03:04,710 Our higher order component is a function that is called 69 00:03:04,710 --> 00:03:06,603 with an existing component. 70 00:03:08,130 --> 00:03:10,410 So, you can really see that behavior 71 00:03:10,410 --> 00:03:12,570 inside of the higher order component itself. 72 00:03:12,570 --> 00:03:16,350 We are exporting a function that receives 73 00:03:16,350 --> 00:03:18,390 some component that we care about. 74 00:03:18,390 --> 00:03:21,870 We can call this function as many times as we want, 75 00:03:21,870 --> 00:03:25,320 with as many different components as we want. 76 00:03:25,320 --> 00:03:27,150 Every time we call the higher order component 77 00:03:27,150 --> 00:03:28,740 with a different component, 78 00:03:28,740 --> 00:03:31,680 we're going to export a different class, right here. 79 00:03:31,680 --> 00:03:32,700 So, it's always gonna be different. 80 00:03:32,700 --> 00:03:37,380 It's always gonna be a new kind of, uh, instance of a class, 81 00:03:37,380 --> 00:03:39,210 if you will. It's not really an instance of class, 82 00:03:39,210 --> 00:03:42,030 but I mean to say it's a new copy of this class, 83 00:03:42,030 --> 00:03:43,320 that we're gonna create new, 84 00:03:43,320 --> 00:03:45,970 every time that our higher order component is called. 85 00:03:46,950 --> 00:03:49,710 The class that is created is a react component 86 00:03:49,710 --> 00:03:52,170 and its sole purpose at this point is to just 87 00:03:52,170 --> 00:03:55,980 render the component that we pass to this function. 88 00:03:55,980 --> 00:03:57,600 So, as it stands right now, 89 00:03:57,600 --> 00:04:01,710 if we called authentication with our resources component, 90 00:04:01,710 --> 00:04:04,920 we would return a react component, 91 00:04:04,920 --> 00:04:08,820 whose only job was to show the class that we passed in, 92 00:04:08,820 --> 00:04:10,683 which is resources. 93 00:04:11,760 --> 00:04:13,680 So, that's kind of explaining what's going on with this 94 00:04:13,680 --> 00:04:15,180 chunk of code right here. 95 00:04:15,180 --> 00:04:16,680 If I were to say, 96 00:04:16,680 --> 00:04:20,040 comment out this at the top, and this right here, 97 00:04:20,040 --> 00:04:22,350 you would say, "Oh, okay, you know, react component, yeah." 98 00:04:22,350 --> 00:04:24,120 Totally, totally reasonable here 99 00:04:24,120 --> 00:04:27,210 and maybe we imported this composed component at the top. 100 00:04:27,210 --> 00:04:28,043 Totally reasonable. 101 00:04:28,043 --> 00:04:29,100 I can understand that, right? 102 00:04:29,100 --> 00:04:30,360 It kinda, it kinda makes sense. 103 00:04:30,360 --> 00:04:32,910 It's only when we add on these additional three lines, 104 00:04:32,910 --> 00:04:35,913 right here, that it starts to look a little bit more weird. 105 00:04:37,050 --> 00:04:39,660 Okay, so that kinda explains the function call. 106 00:04:39,660 --> 00:04:42,450 It explains the return statement here, at the bottom. 107 00:04:42,450 --> 00:04:44,610 The last thing we gotta, we have to cover here 108 00:04:44,610 --> 00:04:46,833 is this.props. 109 00:04:48,090 --> 00:04:50,130 What is the purpose of this.props right here? 110 00:04:50,130 --> 00:04:52,500 What is the source of these props? 111 00:04:52,500 --> 00:04:54,330 So, this is where the diagram that I mentioned 112 00:04:54,330 --> 00:04:55,163 comes into play. 113 00:04:55,163 --> 00:04:58,290 I'm gonna pull another diagram onto the screen. 114 00:04:58,290 --> 00:05:00,540 Now, the left hand side of the screen 115 00:05:00,540 --> 00:05:02,100 is kind of what we've already spoken about. 116 00:05:02,100 --> 00:05:04,380 We have some resources component. 117 00:05:04,380 --> 00:05:06,090 We're gonna pass it into our 118 00:05:06,090 --> 00:05:08,010 authentication higher order component, 119 00:05:08,010 --> 00:05:10,290 where it's gonna get some additional behavior 120 00:05:10,290 --> 00:05:13,620 and then we're going to return from that function, 121 00:05:13,620 --> 00:05:15,600 the higher order component function, 122 00:05:15,600 --> 00:05:18,630 a wrapped version of resources. 123 00:05:18,630 --> 00:05:20,250 So then sometime later, you know, 124 00:05:20,250 --> 00:05:24,090 let's say over in app.js or our router, or you know, 125 00:05:24,090 --> 00:05:25,620 wherever it might be, we decide, 126 00:05:25,620 --> 00:05:27,330 hey, okay, it's time to make use of this 127 00:05:27,330 --> 00:05:28,770 wrapped resources component right here. 128 00:05:28,770 --> 00:05:30,720 I wanna actually make use of this. 129 00:05:30,720 --> 00:05:31,890 And you know what? 130 00:05:31,890 --> 00:05:35,070 We also want to pass in some custom prop, let's say. 131 00:05:35,070 --> 00:05:37,950 So, this right here is just for the purpose of this diagram 132 00:05:37,950 --> 00:05:40,650 and is just some examples, some custom property 133 00:05:40,650 --> 00:05:42,450 that I'm pretending that we want to pass 134 00:05:42,450 --> 00:05:46,713 into this resources, um, this resources component. 135 00:05:47,670 --> 00:05:50,490 So, when we pass in these props right here, 136 00:05:50,490 --> 00:05:53,790 the expectation is even though we wrapped our component 137 00:05:53,790 --> 00:05:55,320 with the higher order component, 138 00:05:55,320 --> 00:05:57,630 even though we did that kind of extra step in there, 139 00:05:57,630 --> 00:06:00,420 the expectation is that these props 140 00:06:00,420 --> 00:06:02,100 should end up in the right place. 141 00:06:02,100 --> 00:06:04,050 They should end up in that eventual, 142 00:06:04,050 --> 00:06:07,050 like that child component, resources.js. 143 00:06:07,050 --> 00:06:08,650 That's where this should end up. 144 00:06:09,540 --> 00:06:12,510 So the purpose of the this.props.line, 145 00:06:12,510 --> 00:06:14,160 in the code that we were just looking at, 146 00:06:14,160 --> 00:06:17,310 is to satisfy this requirement, right here. 147 00:06:17,310 --> 00:06:21,270 It's to satisfy if we try to show or render 148 00:06:21,270 --> 00:06:24,720 our wrapped component and we pass a-any additional props, 149 00:06:24,720 --> 00:06:27,570 we need to make sure that they end up on the target 150 00:06:27,570 --> 00:06:28,923 or child component. 151 00:06:30,060 --> 00:06:31,170 So, let's go back over the code 152 00:06:31,170 --> 00:06:32,720 and kind of see that in action. 153 00:06:35,250 --> 00:06:37,620 Remember composed component down, down here, 154 00:06:37,620 --> 00:06:40,440 this kind of wrapped version of resources, 155 00:06:40,440 --> 00:06:43,050 it is running or kind of rendering 156 00:06:43,050 --> 00:06:48,050 both the authentication class and the c-composed component. 157 00:06:48,990 --> 00:06:51,780 So, when we are referencing composed component right here, 158 00:06:51,780 --> 00:06:54,090 and we try to render it, we're really rendering 159 00:06:54,090 --> 00:06:58,320 an instance of authentication, which in turn, 160 00:06:58,320 --> 00:07:00,930 renders an instance of the composed component, 161 00:07:00,930 --> 00:07:03,870 which we're saying is resources right here. 162 00:07:03,870 --> 00:07:07,830 So if we pass any props to the composed component down here, 163 00:07:07,830 --> 00:07:11,343 like let's say resources is resourceList, 164 00:07:14,190 --> 00:07:16,320 then inside of authentication, 165 00:07:16,320 --> 00:07:17,760 inside of this component right here, 166 00:07:17,760 --> 00:07:22,760 I could s-say console log this.props.resources, 167 00:07:23,670 --> 00:07:27,630 and this would give me resourceList. 168 00:07:27,630 --> 00:07:30,510 Okay, that's, you know, still this is kind of reasonable, 169 00:07:30,510 --> 00:07:32,520 not unexpected, right here. 170 00:07:32,520 --> 00:07:35,070 This composed component is a instance 171 00:07:35,070 --> 00:07:37,380 of the authentication component, 172 00:07:37,380 --> 00:07:39,240 we're passing it some props, 173 00:07:39,240 --> 00:07:41,990 and I expect them to show up on side of that component. 174 00:07:43,530 --> 00:07:46,500 So to get these components to pass through, 175 00:07:46,500 --> 00:07:48,240 get them just pa, take all of our props, 176 00:07:48,240 --> 00:07:51,510 just pass them straight on through to our wrapped component, 177 00:07:51,510 --> 00:07:54,780 to our composed component, to resources. 178 00:07:54,780 --> 00:07:58,410 All we have to do is say, dot, dot, dot this.props 179 00:07:58,410 --> 00:08:01,260 and it passes all of the props that were passed 180 00:08:01,260 --> 00:08:03,000 to the composed component, 181 00:08:03,000 --> 00:08:07,170 down into the resource, resources component right here. 182 00:08:07,170 --> 00:08:08,670 Okay, so that's kinda the whole shebang. 183 00:08:08,670 --> 00:08:11,430 I know, really crazy, kind of confusing, 184 00:08:11,430 --> 00:08:14,310 uh, not, perhaps, not very clear still. 185 00:08:14,310 --> 00:08:16,440 Let's continue going through this example here 186 00:08:16,440 --> 00:08:19,080 and keep building out our authentication component. 187 00:08:19,080 --> 00:08:20,640 And then, once we have some code 188 00:08:20,640 --> 00:08:22,890 that we can actually write, I'm very confident 189 00:08:22,890 --> 00:08:24,360 that things are gonna start coming together. 190 00:08:24,360 --> 00:08:26,640 The pieces are gonna start coming together. 191 00:08:26,640 --> 00:08:28,140 So, the last thing I wanna do inside this file 192 00:08:28,140 --> 00:08:30,270 is just a little bit of cleanup of all the pseudo code 193 00:08:30,270 --> 00:08:31,620 that we just put in here. 194 00:08:31,620 --> 00:08:34,350 The first thing I'm gonna do is delete the console log 195 00:08:34,350 --> 00:08:37,020 and I'm also gonna remove everything at the bottom, as well. 196 00:08:37,020 --> 00:08:39,240 And we're left with just the skeleton 197 00:08:39,240 --> 00:08:41,490 of our higher order component. 198 00:08:41,490 --> 00:08:43,320 In the last section when I mentioned, 199 00:08:43,320 --> 00:08:45,420 hey, the code that we're gonna write is gonna be, you know, 200 00:08:45,420 --> 00:08:46,253 essentially what you'll see 201 00:08:46,253 --> 00:08:47,970 for every higher order component, 202 00:08:47,970 --> 00:08:48,930 this is it right here. 203 00:08:48,930 --> 00:08:50,160 This is kinda the skeleton 204 00:08:50,160 --> 00:08:52,680 or the base of any higher order component. 205 00:08:52,680 --> 00:08:55,800 And so, if you ever want to write your own custom one, 206 00:08:55,800 --> 00:08:57,030 or you know, start fresh 207 00:08:57,030 --> 00:09:00,360 or maybe even give this authentication one a shot yourself, 208 00:09:00,360 --> 00:09:02,880 you can basically copy, paste what we have right here, 209 00:09:02,880 --> 00:09:04,683 and it's good as a starting point. 210 00:09:05,640 --> 00:09:08,823 Okay, let's go ahead and continue inside the next section.