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

Key Takeaways

or rather than higher-order components we've already seen one of them in the last video called with router but what exactly are they well essentially they're functions which wrap other components and give them superpowers or rather extra features so we'll have our component for example the navbar is we passing into a higher-order component and that higher-order components adds functionality to this component so that it comes out supercharged with different features so in the previous video we saw that the higher-order component was called with router and what that did was add props to the props object in the navbar component so that we can have information about the router inside this component so I'm not going to go into too much detail about higher-order components but I thought in this video we would make a simple custom one of our own so you can see the basics of how they work and if you want to explore further you can do all right then so we're going to create a simple higher-order component so let's create a new folder and I'm going to call this hoc for higher-order component and inside that and your file called rainbow Jas so the idea here is that we're going to create a higher-order component that is going to randomize the text color inside another component right so first of all we need to import react from react now then the higher-order component is essentially just going to be a function and I'll call this rainbow and it's a function like that now inside here as a parameter we can take the wrapped component so you know before when we use the with router higher-order component we wrapped this component so when we wrap something like that we receive the wrapped component right here okay so if we were to use this rainbow on another one of these components for example this then we'd receive the about component as a parameter right here that would be the wrapped component and we're going to return that later on because essentially if we want to return a supercharged component so before we do that I want to just get a random color or a class which represents a random color so that it can be styled that way so what I'll do is create a constant and this is called colors and I'll set that equal to an array with a few different colors in so I'll do red I'll do pink I'll do orange I'll do blue running out of colors for other green and then I'll also do yellow alright so we have our array now right here and I want to randomize which one of these that we choose so to do that what I'm going to do is create a new contest called the random color and I'll set that equal to colors like so and then array notation so we want this right here to be a random integer between 0 & 1 2 3 4 5 0 & 5 because the six elements right so to do that what we can say is math dot random this gets us a random number between 0 & 1 and then we can times it by 5 to get as a random number between 0 & 5 and then what we want to do because this is going to have decimals we want to floor that so it's literally just going to be 0 1 2 3 4 or 5 so we can say math but floor to do this and then passing brackets the random number so now this is going to be a random integer between 0 & 5 so that we can select one of these random colors okay so we have that now the random colors stored there now when we apply a materialized CSS class to change the color it's always the color name and then - text so something like this red - text or you know blue - text so we want to make the class name based on this random color so we'll say Const and then class name is equal to the random color plus - text working catenate in the random color that we have with - text to get that CSS class now remember we have to return the wrapped component at the end of the day supercharged so we'll do that now so we'll return a function and this function takes in the props which would have been passed into this component right so if this component received any props then they would be passed in here as well so this function needs to return some JSX and that JSX could just be the wrapped component or we can surround that wrap component with other JSX so I'll do that I'll do a div first of all and then this is going to have a class name equal to something dynamic so curly braces class name which is this thing right here the random color class okay so we're applying this class to this div which is then going to surround the wrapped component so let's pass that wrapped component in here like so okay so hopefully when we return this now it's going to return this component but there's going to be an extra div around this stuff and that div is going to have a class name of red text or pink text etc so hopefully it will color the text of that component makes sense all right then so what about these props well imagine this received props right here well in order to access them and use them inside this component and take them in here then we need to pass them into this component right here now the way we do that is just by using curly braces and then the spread operator props and that is going to pass the props into this component again okay so then we need to export this higher-order component so exports default rainbow-like so save that and now we can import it into another file so I'll import it here we'll say import rainbow from and it's going to be from dot dot forward slash to come out of the components folder then we want to go into the hoc folder then we want the rainbow file all right so now we have that imported we can go ahead and use it down here rainbow we surround the component we wrap it in that function save it and then if we check this out in the browser and we can see this is a random text now I'm going to refresh random refresh random okay so there we go we've created now a higher-order component which is giving the text a random color each time and all there is to it is to create a function right here we've taken the wrapped component we can do something in here we return the original component and extra stuff if we want to we exported and then we use it on the component itself now this is just scratching the surface when it comes to higher order components I would advise you to read more about them if you want to and there's more about them on the official documentation so I'll leave the link to those down below