Instructor: In the last section,
we spent some time putting together
some code for our first higher order component,
but we didn't really talk about anything that was going on,
even though there was a lot of weird code on the screen.
So, let's take some time to discuss exactly
what's happening here
and how we might use this higher order component.
So, we're gonna approach this from two different angles.
First, we're gonna put some kind of pseudo code down here,
at the bottom of our file, to show how we might make use
of this higher order component.
And then, as a kind of separate angle, we're gonna look
at a diagram that helps reiterate
what the higher order component is doing for us.
So, let's first start off with writing some
pseudo code that's gonna kinda demonstrate
how we might use this higher order component, right here.
So, I'm gonna put a comment here
and um, everything we're gonna write below this,
we're going to eventually delete.
So, I encourage you to maybe focus a little bit more
on the discussion as opposed to, uh,
writing down any of the code.
But absolutely, whatever you feel like,
whatever works best for you, uh, go for it.
So we're gonna say, uh, in some other location.
So, basically not in this file.
We want to use this higher order component.
So, the question instantly becomes
how do we make use of this thing?
How do we actually use this,
what appears to be a function, here?
So, let's write some code to help, help demonstrate it.
In this other file, that we're gonna pretend
exists down here, I'm going to import authentication.
And authentication, right here is going to be this function,
this higher order component.
So, I'm gonna put a comment on here.
This is my higher order component
and I'm also going to import resources,
which is the component that I want to wrap.
So, I've now got my higher order component
and I've got my component that I want to wrap
with authentication.
So to make use of this higher order component,
it's actually pretty straightforward.
The syntax in here is a little bit weird or a little bit,
you know, not what we might expect, but actually making use
of it is actually pretty straightforward.
So, down here on line 19, I'm gonna write
const ComposedComponent equals AuthenticationResources.
This is all that's really going on, behind the scenes
when we want to make use of the higher order component.
Then, the final step would be in some say render method.
Write something like composed component.
So now, I'm not rendering resources here,
I'm rendering the composed component,
the composition of the authentication
higher order component, and the resources component.
So in practice, this is the, almost the exact code
that we're gonna write somewhere else.
Uh, we are not going, we're going to, you know,
actually put on our complete import statements.
We'll probably use a better variable name
than this right here, but you can can kind of get the idea
of what we're going for.
Our higher order component is a function that is called
with an existing component.
So, you can really see that behavior
inside of the higher order component itself.
We are exporting a function that receives
some component that we care about.
We can call this function as many times as we want,
with as many different components as we want.
Every time we call the higher order component
with a different component,
we're going to export a different class, right here.
So, it's always gonna be different.
It's always gonna be a new kind of, uh, instance of a class,
if you will. It's not really an instance of class,
but I mean to say it's a new copy of this class,
that we're gonna create new,
every time that our higher order component is called.
The class that is created is a react component
and its sole purpose at this point is to just
render the component that we pass to this function.
So, as it stands right now,
if we called authentication with our resources component,
we would return a react component,
whose only job was to show the class that we passed in,
which is resources.
So, that's kind of explaining what's going on with this
chunk of code right here.
If I were to say,
comment out this at the top, and this right here,
you would say, "Oh, okay, you know, react component, yeah."
Totally, totally reasonable here
and maybe we imported this composed component at the top.
Totally reasonable.
I can understand that, right?
It kinda, it kinda makes sense.
It's only when we add on these additional three lines,
right here, that it starts to look a little bit more weird.
Okay, so that kinda explains the function call.
It explains the return statement here, at the bottom.
The last thing we gotta, we have to cover here
is this.props.
What is the purpose of this.props right here?
What is the source of these props?
So, this is where the diagram that I mentioned
comes into play.
I'm gonna pull another diagram onto the screen.
Now, the left hand side of the screen
is kind of what we've already spoken about.
We have some resources component.
We're gonna pass it into our
authentication higher order component,
where it's gonna get some additional behavior
and then we're going to return from that function,
the higher order component function,
a wrapped version of resources.
So then sometime later, you know,
let's say over in app.js or our router, or you know,
wherever it might be, we decide,
hey, okay, it's time to make use of this
wrapped resources component right here.
I wanna actually make use of this.
And you know what?
We also want to pass in some custom prop, let's say.
So, this right here is just for the purpose of this diagram
and is just some examples, some custom property
that I'm pretending that we want to pass
into this resources, um, this resources component.
So, when we pass in these props right here,
the expectation is even though we wrapped our component
with the higher order component,
even though we did that kind of extra step in there,
the expectation is that these props
should end up in the right place.
They should end up in that eventual,
like that child component, resources.js.
That's where this should end up.
So the purpose of the this.props.line,
in the code that we were just looking at,
is to satisfy this requirement, right here.
It's to satisfy if we try to show or render
our wrapped component and we pass a-any additional props,
we need to make sure that they end up on the target
or child component.
So, let's go back over the code
and kind of see that in action.
Remember composed component down, down here,
this kind of wrapped version of resources,
it is running or kind of rendering
both the authentication class and the c-composed component.
So, when we are referencing composed component right here,
and we try to render it, we're really rendering
an instance of authentication, which in turn,
renders an instance of the composed component,
which we're saying is resources right here.
So if we pass any props to the composed component down here,
like let's say resources is resourceList,
then inside of authentication,
inside of this component right here,
I could s-say console log this.props.resources,
and this would give me resourceList.
Okay, that's, you know, still this is kind of reasonable,
not unexpected, right here.
This composed component is a instance
of the authentication component,
we're passing it some props,
and I expect them to show up on side of that component.
So to get these components to pass through,
get them just pa, take all of our props,
just pass them straight on through to our wrapped component,
to our composed component, to resources.
All we have to do is say, dot, dot, dot this.props
and it passes all of the props that were passed
to the composed component,
down into the resource, resources component right here.
Okay, so that's kinda the whole shebang.
I know, really crazy, kind of confusing,
uh, not, perhaps, not very clear still.
Let's continue going through this example here
and keep building out our authentication component.
And then, once we have some code
that we can actually write, I'm very confident
that things are gonna start coming together.
The pieces are gonna start coming together.
So, the last thing I wanna do inside this file
is just a little bit of cleanup of all the pseudo code
that we just put in here.
The first thing I'm gonna do is delete the console log
and I'm also gonna remove everything at the bottom, as well.
And we're left with just the skeleton
of our higher order component.
In the last section when I mentioned,
hey, the code that we're gonna write is gonna be, you know,
essentially what you'll see
for every higher order component,
this is it right here.
This is kinda the skeleton
or the base of any higher order component.
And so, if you ever want to write your own custom one,
or you know, start fresh
or maybe even give this authentication one a shot yourself,
you can basically copy, paste what we have right here,
and it's good as a starting point.
Okay, let's go ahead and continue inside the next section.