In this part we are going to create a custom open and first thing we can go to create a component.
So we create a components folder.
And like before we go to create a component a thought they ask.
And then inside the component a we are going to copy the code from the previous project and paste it
here so that we can have the button groups and we are going to use the bootstrap and also the we abstract.
So we can copy this one and page it to install the poster have and also we are going to import the CSF
and scenes.
You can see we already use the button groups buttons and also the edges.
So we are going to import these from Dolby wrap.
Also we are going to use the USDA so we also have to import the USDA from the we add and these are also
the function that we use to be for which are you using to set the counter.
So now we can import the component from the component.
So we import the component a form components component a.
And then we paste a component here and we go to the CIA the Web site and you can see the counters already
working fine.
And now if we are going to create a component B we need to copy from the component a and create a component
B and then we change the name to a component B but you see the order things have been duplicate ones.
And so you can imagine if we have 10 countries and we have to go to create 10 functions and tend to
use state.
But before we go to talk about the test on the hope we are going to import the component B.
Now you see the component B also working fine.
Now we are going to talk about the custom hook the custom who used to extract the logics so that we
do not need to duplicate this type of code in each of the component so we can cut this out.
And then we go to create a folder called Custom hook and then we code to create a use convert all key
s and then we create a function in this and also we import we add and use day from we add.
Now we are going to call these at use contour and also explore the default use Conger and then we paste
the logic tool here then we can let the user to customize the initial console where they use but if
they do not set any values we the default value to be zero but for letting the other component to use
these functions we have to return to where those otherwise the component cannot use.
For example we have to we turn the cogs where the whole increment Dickerman and also that we set.
Now we can do to the use contour by adding piece nine but we have to also need to import the second
car from the custom hook and we do the same for the component B.
So we delete all this code and paste the use counter and this time we try to offset any value to see
whether it will get the default value to be zero because we already set the initial count to be zero.
If we do an offset any value here and then we also need to import the U.S. conquer.
So actually we do not need to use the.
We add in the U.S. counter and also we do not need to use the U.S. state in the component because we
already get all the things we need from the U.S. Canada.
Now we can see that default value off component a is 10.
And it can still increment and decrement and also we said and compare them be they neutral where they
eat zero and you can see you can work independently and now we can try one more thing is we can allow
to customize the increment values by setting and other variables port where they lose.
You said that you knew already what is one so we go to the component B and we try to add the initial
where there is zero and the incremental value is free and now if we try again you can see it increment
by free rather than by 1.
But the component a is still increment by 1.
So this is how to use the custom hook.