And with our basic setup within the product context complete we're actually going to start one more
valuable information which is gonna be our products.
So within the products component I would like to get out of the greeting because that's not where we're
gonna be passing.
And for the time being I'm just gonna comment this out and say I wouldn't want access anything at all.
Otherwise I'm gonna have some errors and then delete my greeting and then back in the product we're
going to use our use statehood.
And just to jog your memory use that hook again is a hook.
It is a function that comes with react and in fact it returns to values in the array.
And in this case we're using array destruction in order to in fact get those values.
And the reason why we're using use state hook because that allows us to set up state variables in our
functional components because please keep in mind this is not a class based component.
This is a functional component.
So let me get rid of all the gibberish that I had before and then I'm just going to say that value for
now is just going to be an empty or.
Yeah I'm just gonna leave it empty.
Let's say it and of course I'm going to have an error so maybe let's just save it as a hello just so
we don't have any errors.
And the moment we do that like I said I would want to set up my state.
So what are gonna be my state values in my product context.
Well there's gonna be three of them.
There's gonna be one for loading so when we're waiting for the project there's gonna be a loading component
displayed then there's gonna be one for featured product.
So we're gonna get back all the products from the API or from our back.
And later on.
And then I would want to display the feature product.
So only the product that has the property featured so true.
And then I also have actual product.
So all the product.
So three state values.
And like I said we're gonna use our ReACT use state again you can import it right away with a comma
and then just look for you state.
But in my case I'm going to go with the react and then dot you state.
Now just to kind of showcase one more time what we're getting back from you state was just right console
log we're gonna write react use state that is of course our hook and then we need to pass in the initial
value.
So for the time being I'm just gonna passing false because I'm more interested in showing you what we're
gonna get back from our used state hook and that is like I said an array with two values.
So first we're getting our actual state value which currently has the value of false and the second
one is the function that in fact controls that value.
So whatever value you set up you also are going to get the function and we're gonna use a rate the structuring
to access both of them to access the first item as well as the second.
And the way it's going to look like we're gonna go cost then whatever name we would want.
So in this case this is gonna be a loading and all three of them.
The setup is going gonna be exactly the same.
Only the names are going to change.
So there's gonna be state value with the name of holding.
And also we're going to get our set loading function on the set loading function of course is again
coming from you state and then we pass in the default value.
So that's how we have right now one state value with the name of loading.
And we also have a function that controls it.
And our initial values false.
So we're not loading initially.
And let me copy and paste that and we're going to have two more.
We're gonna have one for all the product.
So we're gonna have products then instead of set loading we're gonna set it to set product and again
naming is really up to you is just convention to use this set and then whatever named you used for your
first item if let's say you call this period and you would say said Peter but you don't have to sense
again you're getting back to function.
So you can call it whatever you want.
The same with the first value I'm just naming them because that's how I thought that it would make more
sense.
And then for our initial value for a product we're just gonna get an array there there's gonna be an
empty array and the same thing is gonna be for the featured product.
So we're gonna have both of them set equal to an empty array or our last state value is going to be
featured.
So it's gonna be the property name are featured.
And then of course it's gonna be set featured as our function.
And now instead of passing in simple string of hello or any kind of dummy data what we're gonna do is
we're going to set our value equal to an object and then there's gonna be three properties we're gonna
have products and again we're using the E six shorthand then we're gonna pass in the loading and all
of them of course we're getting here.
And then last one is gonna be our featured product.
And lastly let's head over back to the product instead of again getting some meaningless greeting we're
going to get a loading and product and just again showcase what we're getting back.
For now I'm not going to destructor anything I'm just to show you a whole object so I'm gonna call this
a response and then let's ride away maybe console log.
So let's say response.
And we should have an object with three values.
So we're gonna.
Product which is an empty array.
Then we have the loading which is set to true.
And then we have the product.
So again if I would want to get one two or all three of them.
Well the easiest way is just the structure.
So I'm going to say it's not going to me he responds it is going to be loading as one property and then
the second one is product.
And for the time being I'm not gonna do anything.
But we have successfully set up some meaningful data within the product.
So now we need to start working on fetching our product.