React Higher Order Components Tutorial

hey guys so today we're gonna talk about higher-order components in react in JavaScript we have higher-order functions which are nothing but a function that you pass to another function as an argument so higher-order components are very similar so what you can do you can abstract out the common functionality is along some of the components and you can build a function and then you can pass your component basically wrap the component with this function the special function and do something in it inside and then you can return a component and that's what you call higher-order component and the important thing to notice as inside this function you don't really change any functionality of a component you rather do kind of minor things like for example you can inject new prompts or translate one prop to another you can build custom errors or you can set defaults things like that so what we're gonna do we're gonna take a very simple example so you can learn higher-order components and welcome to tech see tutorials all right so to start with I have created this project using create react app so this is what we're not working so our objective is let's create a custom component and which is simply a button and inside a button we can have a default style which will be inside provided inside the button and then we can have a prop called disabled so when we pass the prop disabled it should pick a different style from inside so we have we will have some logic inside the component or where it would pick a different style when we provide a prompt and first we're gonna do it using you know it just the logic inside the component and then we're going to extract that logic out to a higher-order component to see how it really works right so let's build our first component so inside the source folder I am going to create a folder called components and inside this I would have let's say button one Dargis okay now this button it's gonna be a functional component so all I have to do is Const button one equal to this would be functional component which returns regular button and I would say I am one okay and it would have styles but let's just first export it so export default button what alright so we can use it so inside my app component all I have to do is I get import components and inside I would have a button one right so now I can use it here button one and I don't have to do anything here right now so let's see how it complains all right so I have this button right now it's normal but let's add some style to it and I had to add react here because it won't work without it okay so let's some add some styles so for that I can have some style object inside so let's say Const styles equal to and I'm gonna have some defaults so I have some background color which is like a grayish looking and I can have some color which is kind of whitish looking and I can also add some padding that's add ten pixels now here for the button we can have some styles so I can just use this task so I can say styles dot well style equal to and I can use styles dot default so this applies the the default styles to this button so my button looks something like this is a grey background and some whitish color alright so now what I want is from here I user should be able to pass let's say disabled and it should pick a different style so it should show a disabled button with a disabled style it could be one or multiple styles you know could have a different background color different color it could have a different border and all that stuff right so how do I do that so inside here I can have another sound call let's say this able okay so I have to default and disabled now based on the prop disabled I'm gonna make that decision here so instead of picking a default style I wanna pick pick disabled style but remember I also want the padding here so I don't want to completely pick the disabled I just want to override the background color and color so what I can do here is since I would get some props here right I can say if props has disabled so so I can say if prompts has disabled then I want to overwrite this this into here right what I need to do is have some local variable Const let's say styles equal to so this would be styles dot and I can use a spread operator so I could copy all the values right here I can say underscore styles equal to I can keep all the styles and overwrite it with this style start disabled so I can say styles dot disabled and I can spread as well all right so this Styles would have this background color discolor and padding from here so basically create a copy here so this which they should have this three styles and then it would override this two here right and all I have to do it just simply use underscore style here yeah underscore style sexually all right so now I can see this button which looks like disabled what if you have another button which also requires same disabled I'd also need needs to have a same mechanic mechanism to override it so I don't want to lock right this logic in every single component I need to move this out into some function which is a higher-order component so let's do it so what I'll do here is create a new folder I'm gonna call it hoc which means higher-order component and let's create a file called a wrapper jeaious and also what we can do is we can remove this dönitz from the button one and move it to somewhere let's say create a new folder called styles and inside here we can have a new file call common style start yes okay and here I can have the same one and I can export it export default styles so now styles are coming from this common styles it's no longer inside this button and I don't want to import it here as well I want to keep this clean I want to import in Titus inside this style wrapper all right so let's first import common styles from and this is actually one level up so styles and common styles all right now how do we build this higher-order component so this function would take an argument as a component so let's call this the wrapped component if I want to use this inside let's say button 1 then what I would do is I would have to say import style wrapper I need to import the Sai wrappers that we just created it's called styles wrapper I guess from and again it's like a one level up so it's hoc slash sty wrapper right and then what we export this button in terms of exporting just a button we can just wrap it with this sty wrapper alright so as we can see taking this component which we are passing so we are passing button wrapper to the style wrapper right so which is happening here now what we want to do is we want to take its prompts and then we want to look at the same thing we did India the component where we look at the props look at the disable and if it's disabled then we want to build some styles based on the disable status right so let's build that function separately so we don't have to you know deal with it here so I'm gonna call this function translate props because that's what were you doing right yeah translating we are passing some props and we are translating so this will take some prompts if our props has disabled and paste this should be done outside so the first thing you want to do we want to take the common sounds to be inside I'll Sofia we have common styles and then if the props has a disabled property then we would take the styles and it's override disabled on a foreign right now remember additional to disabled we want to add some stance right so here we need to create a new prop so I can say new prompts equal to we take the original props so this would have what so this would have only one prop which is to say body put it show and then we add styles to it so we can say styles equal to underscore styles and then we return then you prompt ok so we take the prop which is disabled equal to true we translate it to some styles and then we we also pass we are already passing this component into this function right so we need to return a function is we're gonna call it wrapped render and it will take it will have an argument color args and then we're gonna return the same function same component back with the translated props so we can say return translated from the original props takes the crops of a component translated and then this returns the new component right that's that's all it does and inside the button one what we want to do here is we don't want all of these here and instead of styles we can now call it based on prop start styles since we are passing the starts we are adding added the new prop called silence here right so it will be available now one thing I need to do okay so this one disabled there's no Styles here so we need to have a common styles died disables because we are great getting it from the common stance oh this should be actually prompt start Styles not this dot process out all right so it works so I have a disabled button and it works beautifully so here now my button one looks so simple and this is how it's supposed to look like without any lock logic inside you know all the logic is now moved to this sty wrapper and so if I create another button - I just have to simply wrap the button - with Sai wrapper and and you can also pass a disabled prop inside and it would pick the disabled sod for that button so this is really cool by the way I will upload this example onto my get site so you can look at it and play around with it and by the way this is much larger series and react if you haven't been following it I'll provide a link to the playlist so where you can see all the tutorials from the beginning to end and I hope you have learned something from this tutorial and if you did please like don't forget her like subscribe and provide a nice comment and you can actually help the channel via patreon and by donating few dollars and you can also translate this video into your native language so your countrymen can also learn it's very easy actually I provided the description on how to do it inside the description of the video and thank you

Channel: techsith

Views: 78,610

Keywords: react hoc, react higher order components, React JS, React tutorials, React 16, react fiber, react 2018, react 2019, react 17, reactjs, react styles

Id: A9_9gQIkfx4

Length: 15min 40sec (940 seconds)

Published: Mon Apr 30 2018