‫So as I just mentioned,
‫there is actually another Advanced React Pattern
‫that I want to quickly show you.
‫Now, this one isn't super important,
‫which is why I didn't even include it in the first lecture
‫of the section,
‫but I still need you to know about it.
‫And so let's now take a look
‫at the Higher Order Component Pattern.
‫So basically we want to do now something similar
‫to what we just did with the Render Props
‫but with the Higher Order Component Pattern.
‫Now, I would actually say that
‫almost no one still writes Higher Order Components by hand,
‫but I'm still gonna show you this because some libraries,
‫do actually expose Higher Order Components,
‫and then it's gonna be very useful to know what they are.
‫So you don't need to know how to write them
‫and in this lecture,
‫I will just quickly show you a Higher Order Component,
‫what it is,
‫and how it works
‫and also why it would be used.
‫So, let's imagine that we got this component right here.
‫So this product list from a third party library
‫and that we cannot change it.
‫So we just got this here and we now still want
‫to add these two toggle functionalities.
‫So, this one right here and also this one
‫but we cannot change this product list component.
‫So how could we do that?
‫Well, one way would be to write a Higher Order Component
‫to basically enhance or improve this component right here.
‫So, a Higher Order Component is simply a component
‫that takes in another component
‫and then returns a new component that is better,
‫so an enhanced version of the initial component.
‫And here I actually already created this.
‫So,
‫right here,
‫we have this Higher Order Component .js file
‫and let's take a look at it.
‫So, that component is this one called withToggles
‫because it will basically add back
‫those two toggles that they showed you earlier
‫to our component.
‫And that component is the wrapped component
‫that we can pass in.
‫So it's pretty common that a Higher Order Component
‫is called something that starts with this with keyword,
‫so that's kind of a convention,
‫because basically it will add these toggles
‫to the component that we pass in.
‫And so then we have a new component with toggles, right?
‫But anyway, as I mentioned earlier
‫the Higher Order Component does return a new component.
‫and that's exactly what we have here.
‫So we return this new list component
‫which has the identical logic that we had previously.
‫What's special now about this is that,
‫here in the middle of all this logic
‫it does then basically contain that wrapped component,
‫so the component that we are going to pass in.
‫Then here all the props are going to be spread,
‫so basically to get them from the component
‫that we pass in right here.
‫So this is a pretty common pattern
‫and then here we just have this items props
‫with these display items that are computed up here.
‫So again, the way in which we write a Higher Order Component
‫is not that important.
‫What matters is that it's usually called something
‫that starts with, with and that it takes
‫in one component and returns a new one.
‫And the new one adds some functionality
‫to that passing component.
‫So it's then returned here,
‫together with a bunch of other stuff.
‫And now we can use this Higher Order Component,
‫right here.
‫So, let's now create a product
‫list,
‫so similar to the name that we have down here.
‫A product list with,
‫toggles
‫and so here is that with toggles again.
‫And this will be the result of calling
‫with toggles,
‫and then passing in the
‫product list component.
‫So this one right here,
‫maybe let's place it,
‫actually here just to make this a bit easier to understand.
‫So we had the product list component
‫and then we passed that into the Higher Order Component
‫called withToggles.
‫And so since this returns a component,
‫we then stored that component here in this new one.
‫So ProductListWithToggles
‫and now all we need to do is to use that here.
‫So,
‫let's give ourselves another div here
‫with the class name of col-2
‫just to keep them basically in a separate row here.
‫And then first, let's take the ProductsList,
‫so the original one just so we see the difference.
‫And this one also accepts a title and the items.
‫So let's call the title here,
‫products,
‫Higher Order Component
‫and then the items should just be,
‫the products.
‫All right, then let's close these two
‫as we no longer need them.
‫And so then afterwards,
‫or maybe let's even comment this entire row out.
‫So grabbing all of this
‫and there it disappears.
‫So again, here we have that initial product list
‫which doesn't have this button to close it
‫or to collapse the items,
‫right?
‫But now let's duplicate this,
‫and then here using,
‫product list
‫with
‫toggles,
‫give it a save and beautiful.
‫So now we do have the toggle
‫and hopefully the other one as well.
‫And indeed, there we go.
‫And so with this,
‫we reached our goal of enhancing the product list
‫with the features that we wanted it to have.
‫So the features that the other lists also had,
‫so these two toggles right there.
‫All right,
‫so if in any case you ever use a library which exports
‫or which provides you with a Higher Order Component
‫like this,
‫then this is the logic behind that.
‫All right, so you called a Higher Order Component
‫with the initial one
‫and that will then return you an enhanced component.
‫And this is actually all I wanted you to know
‫about the Higher Order Component pattern.
‫It used to be extremely important in the past,
‫again before we had React Hooks,
‫but now, again this is all you need to know.
‫And so let's now move on to probably
‫the most important one that we're going to learn
‫which is the Compound Component Pattern.
‫So, see you there very soon.