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