Complete React Tutorial (& Redux) #28 - Higher Order Components

Hey gang, in this React tutorial I'll be talking a little bit about what Higher Order Components are, and how we can create one from scratch.

----------------------------------------

🐱‍💻 Course Links:

----------------------------------------

[paulhitchmough]

Very strange moment, following this tutorial at 2:30, after you said "pink", I was able to guess the exact others ones before you even typed them. Basically, we are the same person, congratulations. To both of us.

[PoodlePlugins]

This is by far the clearest explanation of HOC I've found on Youtube, thanks

[sylvielmna]

It's rare to see 'colour' spelled that way in programming tutorials. As a Canadian I appreciate that. Haha!

[Cho]

The 'Supercharged component' or 'higher-order component' is beyond what I expect. It's awesome! Thanks:)

[newtykip]

That randomColour const can be re-written as this, as it is much better than specifying the amount of colours yourself:

const randomColour = * colours.length)];

[HenriqueVianna_c]

So, Higher Order Components can be used as Decorators. By the way, excellent course! =)

[moaazbhnas]

If anyone got confused here {...props}, it's a new JSX feature (JSX spread attributes).
"The properties of the object that you pass in are copied onto the component's props."
if `props = {prop1: x, prop2: y}`
<Component {...props}> = <Component prop1={x} prop2={y} />

[KnownTechnical]

Excellent explanation dude, i started learning in my own native lang but finally u make me understand whats going on here.

[we.are.awakening]

Great course! One thought for this lesson: Instead of using Math.floor you should use Math.random because with floor rounding down you will pretty much never get the last item in the array (in this case: yellow).

[joshcesana]

Question: Where did the props come from in the Rainbow component? I understand you're passing them to WrappedComponent, but where did props come from originally? Is it all the const variables?

[dyunior]

New in React got issue on HOC passing props, I cant access passed methods. you saved me there! at 4:45. thanks Ninja!

[jasondebelle]

Poor yellow :(
Only has a 1 in 10^16 chance of being seen.
Our hero modulo can help our buddy yellow out!
something like
Math.floor(Math.random() * % 6

[ajai]

Nice Explanation of the react concepts.I have completed till tutorial# - 28.Can you also add a video tutorial on how to implement Route protection in React?

[SarveshChauhan]

Can you elaborate more about the higher component? I did not understand were the return props are coming and what is WrappedComponent

[ASoftwareEngineer]

Thanks for the time of explaining this kind of advance topic to us. Well done as always.

[MurrTuck]

That was confusing, but I will continue to research it.

[osamatalaat]

Simple correction..
I think the right to say
Math.floor(Math.random() * 6)
not
Math.floor(Math.random() * 5)

[muhammadsiddiqui]

Would you believe that:

2 hrs I spent figuring out the error and it was I wrote "wrappedComponent" instead of "WrappedComponent" and they call it PascalCase convention

[vikrantsingh]

I think a better way is: * colors.length)]

[pthorsley]

also make sure to add exact={true} on the NavLink exact={true} to="/" so that only one Navlink gets Active class