-: In this section we're gonna move on to step four
of creating a higher order component.
So the step right here says pass props
through to ChildComponent.
Well with just text, that's not super clear
but we're gonna talk about what it means right now
and as soon as I explain it to you
I think it'll make a pretty good amount of sense.
So we're gonna look at a diagram in just a second
but first I want to remind you something
about how our application is currently set up.
If I flip back over to my code editor
and open up my CommentBox file
I can scroll down to the bottom,
and down here you'll recall that we are wrapping
our CommentBox component with the connect tag right here.
So the connect tag is currently taking our action creators
and it's passing them as props
down to the CommentBox component.
Okay, that's a really critical thing, keep in mind.
The action creators get passed as props
down to that CommentBox.
So clearly the connect tag wants to communicate
down to this component, but the CommentBox receives
some number of props besides that,
in addition to these action creators
we saw it just a moment ago
when we put together that whatever it was,
we called it the should navigate away function,
whatever it was, we inside that thing
we accessed the history prop
that is provided to us from React Router.
So that history prop comes from the fact
that inside of App.js, so here's App.js.
If we go down to the render method right here
we are showing the CommentBox component
through the route component right here.
So because we are rendering CommentBox through the route
the route adds in some props
for the count box including that history prop.
So clearly there's kind of like
a higher hierarchy here that's going on
where the route is trying to get some props
down to the CommentBox.
And the connect function is also trying
to get some props down there as well.
So I took this entire hierarchy and I diagrammed it out.
So it looks a little something like this, this diagram
maybe without these boxes right here, maybe not.
Maybe if we pull that over.
Okay, that makes more sense.
So at the very top we've got our app component
that's showing a route component.
The route is trying to show the CommentBox
but it doesn't show the CommentBox directly.
It shows a connected version of the CommentBox.
'Cause inside that CommentBox file right now
we are exporting the result of calling connect
with the CommentBox component.
So the higher order component of connect
gets injected in here.
Now, in a moment you and I are going to wire up
our requireAuth higher order component
into this hierarchy as well.
And as I've said several times
our higher order component is going to kind of inject itself
above the actual CommentBox.
Now think about what happens when we do that injection.
When we get our higher order component inside of here.
We have already seen
that the route component right here has this history prop
and it wants to make sure that history prop
shows up inside the CommentBox.
We've also seen that the connect function
has that list of actions
and it wants that list of actions
to show up inside the CommentBox as well.
But because you and I are going to sort of inject
the requireAuth a higher order component inside of here,
these props are now going to show up
inside of our component the one you and I just created.
So connect is gonna try to render or requireAuth component
and it's gonna pass down that actions object
and the history stuff from route up here as well.
So now it's our job, your job and my job
to make sure that these props that have been passed down
from these parents also show up
inside the CommentBox as well.
You and I cannot be responsible for breaking the chain here.
We have to make sure that whatever props
are requireAuth component that we've now
injected into this hierarchy receives gets passed along
down to its ChildComponent of CommentBox.
So that's the idea with step number four right here.
We need to make sure that any parent props
or any props that we receive from the parent
down into our newly created higher order component
get passed down to the ChildComponent of the CommentBox.
As a quick example of this, let's,
lemme show you what would happen if we did not do this.
So maybe that would make a lot of sense.
I'm gonna flip back over to my code editor
and I'm gonna wire up the requireAuth higher order component
to the CommentBox.
All right, let's go through this.
So inside of CommentBox I'm going to import
requireAuth from components/requireAuth.
Okay, so we're gonna import this right here
and then we're gonna go down to the bottom of the file
and we're going to call requireAUth
with our CommentBox class.
So down at the bottom of the file,
here's CommentBox, I'm going to place requireAuth
and I'm gonna call it with the CommentBox like so.
So make sure you triple check your parentheses on the line
'cause we've now got some pretty involved syntax.
All right, so let's now save this
and we're gonna go back to the browser
and we're gonna see what happens
if you and I do not attempt to pass through
our props to the CommentBox component, all right.
So, I'm gonna flip back over to the browser.
I'm gonna navigate over to the post a comment component
and I'm gonna sign in, my mistake.
I wanna sign in first and then I'll go over there.
So now if I enter a comment inside here,
our component of CommentBox
has not received the actions object.
It has not received any of our action creators
because you and I have not communicated them
from requireAuth down to that CommentBox component.
So if we now try to invoke one of those action creators
by entering text right here and clicking on submit comment
we're gonna this nasty air message.
And the air message says probably something like,
"saveComment is not a function"
because we did not pass down those action creators.
All right, so at this point I think you got a good idea
I've harped on this long enough.
So let's just do the fix.
So this is what we do to implement step four
on this chart right here.
All we have to do is open up our higher order component.
We're gonna go to that render method right here.
And on this ChildComponent, which is really the CommentBox
we're gonna write {...this.props}.
So what this does right here is it takes any props
that were passed to our higher order component
of composed component, that's the name
of our higher order component inside of here.
It takes any props that it receives
and it just passes them straight down
to the ChildComponent of CommentBox.
So just about every single higher order component
that you're ever gonna create, somewhere inside there
you're going to see this snippet right here.
Where we try to take all the props
that were taken from the parent or receive from the parent
and we pass them through down to the child.
So let's now save this.
We'll flip back over to the browser
and we'll test out our application again.
So we get the reload and when the reload kicks in
it's gonna navigate us back over to local host 3000.
If I try to navigate over to post a comment
I don't have any successful navigation
'cause I'm not logged in.
So I click on sign in.
Now I can go over there and now if I enter in some comment
I can click submit comment and I don't get any air message.
Now of course, nothing appears at the bottom
because this page is no longer showing our list of comments.
But if I go back over to home
I'll now see the comment up here on the list right here.
All right, so that's it.
That is higher order components in a nutshell.
So any time that you start to notice
that your components have some repetitive logic inside them
I want you to consider going through this flow right here.
You're going to identify all the logic
that is reusable or should be extracted out.
You're gonna create that higher order component file
and add that boiler plate that we saw.
You're gonna copy all that reusable logic
over to the higher order component
and then the most critical step
that you can never forget to do
'cause you will forget this the first time around.
You need to make sure that any props
that were intended to go down
to that ChildComponent get passed through.
You have to make sure you pass them through.
And then you can make use of your higher order component.
Okay. So, that's it.
That's our authentication higher order component.
Now I want you to know that you and I
are going to use this higher order component right here
later on inside the course.
So I encourage you not to delete this file
and if you want to change anything inside this file,
please try to make a backup.
If you end up changing it or throwing it away,
that's totally fine.
I will give you a copy later on inside the course,
but honestly, it'd be easier
if you just kept your own copy around.
So now that we've gotten through higher order components
let's take a quick pause right here
and we'll continue in the next section.