1
00:00:00,530 --> 00:00:07,070
And with our basic setup within the product context complete we're actually going to start one more

2
00:00:07,160 --> 00:00:11,430
valuable information which is gonna be our products.

3
00:00:11,510 --> 00:00:17,120
So within the products component I would like to get out of the greeting because that's not where we're

4
00:00:17,120 --> 00:00:18,510
gonna be passing.

5
00:00:18,510 --> 00:00:24,260
And for the time being I'm just gonna comment this out and say I wouldn't want access anything at all.

6
00:00:24,260 --> 00:00:30,220
Otherwise I'm gonna have some errors and then delete my greeting and then back in the product we're

7
00:00:30,230 --> 00:00:33,700
going to use our use statehood.

8
00:00:33,830 --> 00:00:37,440
And just to jog your memory use that hook again is a hook.

9
00:00:37,490 --> 00:00:43,320
It is a function that comes with react and in fact it returns to values in the array.

10
00:00:43,520 --> 00:00:48,950
And in this case we're using array destruction in order to in fact get those values.

11
00:00:48,950 --> 00:00:55,550
And the reason why we're using use state hook because that allows us to set up state variables in our

12
00:00:55,550 --> 00:00:59,730
functional components because please keep in mind this is not a class based component.

13
00:00:59,810 --> 00:01:01,610
This is a functional component.

14
00:01:01,670 --> 00:01:07,370
So let me get rid of all the gibberish that I had before and then I'm just going to say that value for

15
00:01:07,370 --> 00:01:09,990
now is just going to be an empty or.

16
00:01:10,040 --> 00:01:11,690
Yeah I'm just gonna leave it empty.

17
00:01:11,810 --> 00:01:17,330
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

18
00:01:17,330 --> 00:01:18,760
we don't have any errors.

19
00:01:18,920 --> 00:01:22,190
And the moment we do that like I said I would want to set up my state.

20
00:01:22,760 --> 00:01:27,080
So what are gonna be my state values in my product context.

21
00:01:27,080 --> 00:01:29,070
Well there's gonna be three of them.

22
00:01:29,070 --> 00:01:35,720
There's gonna be one for loading so when we're waiting for the project there's gonna be a loading component

23
00:01:35,750 --> 00:01:39,050
displayed then there's gonna be one for featured product.

24
00:01:39,170 --> 00:01:43,670
So we're gonna get back all the products from the API or from our back.

25
00:01:43,680 --> 00:01:44,780
And later on.

26
00:01:44,780 --> 00:01:47,170
And then I would want to display the feature product.

27
00:01:47,360 --> 00:01:51,630
So only the product that has the property featured so true.

28
00:01:51,710 --> 00:01:54,660
And then I also have actual product.

29
00:01:54,680 --> 00:01:55,820
So all the product.

30
00:01:55,970 --> 00:01:57,420
So three state values.

31
00:01:57,420 --> 00:02:04,160
And like I said we're gonna use our ReACT use state again you can import it right away with a comma

32
00:02:04,400 --> 00:02:06,250
and then just look for you state.

33
00:02:06,320 --> 00:02:10,100
But in my case I'm going to go with the react and then dot you state.

34
00:02:10,100 --> 00:02:15,440
Now just to kind of showcase one more time what we're getting back from you state was just right console

35
00:02:15,440 --> 00:02:23,630
log we're gonna write react use state that is of course our hook and then we need to pass in the initial

36
00:02:23,630 --> 00:02:24,030
value.

37
00:02:24,440 --> 00:02:29,000
So for the time being I'm just gonna passing false because I'm more interested in showing you what we're

38
00:02:29,000 --> 00:02:34,790
gonna get back from our used state hook and that is like I said an array with two values.

39
00:02:34,790 --> 00:02:41,300
So first we're getting our actual state value which currently has the value of false and the second

40
00:02:41,300 --> 00:02:45,310
one is the function that in fact controls that value.

41
00:02:45,710 --> 00:02:52,100
So whatever value you set up you also are going to get the function and we're gonna use a rate the structuring

42
00:02:52,340 --> 00:02:56,980
to access both of them to access the first item as well as the second.

43
00:02:57,410 --> 00:03:01,400
And the way it's going to look like we're gonna go cost then whatever name we would want.

44
00:03:01,400 --> 00:03:04,460
So in this case this is gonna be a loading and all three of them.

45
00:03:04,460 --> 00:03:06,280
The setup is going gonna be exactly the same.

46
00:03:06,380 --> 00:03:08,050
Only the names are going to change.

47
00:03:08,120 --> 00:03:11,080
So there's gonna be state value with the name of holding.

48
00:03:11,210 --> 00:03:17,930
And also we're going to get our set loading function on the set loading function of course is again

49
00:03:17,930 --> 00:03:21,820
coming from you state and then we pass in the default value.

50
00:03:21,890 --> 00:03:25,780
So that's how we have right now one state value with the name of loading.

51
00:03:25,910 --> 00:03:28,780
And we also have a function that controls it.

52
00:03:28,920 --> 00:03:30,700
And our initial values false.

53
00:03:30,710 --> 00:03:32,990
So we're not loading initially.

54
00:03:32,990 --> 00:03:35,960
And let me copy and paste that and we're going to have two more.

55
00:03:35,960 --> 00:03:38,540
We're gonna have one for all the product.

56
00:03:38,540 --> 00:03:45,260
So we're gonna have products then instead of set loading we're gonna set it to set product and again

57
00:03:45,260 --> 00:03:51,590
naming is really up to you is just convention to use this set and then whatever named you used for your

58
00:03:51,590 --> 00:03:57,920
first item if let's say you call this period and you would say said Peter but you don't have to sense

59
00:03:57,950 --> 00:03:59,510
again you're getting back to function.

60
00:03:59,570 --> 00:04:01,080
So you can call it whatever you want.

61
00:04:01,160 --> 00:04:06,530
The same with the first value I'm just naming them because that's how I thought that it would make more

62
00:04:06,530 --> 00:04:06,830
sense.

63
00:04:07,250 --> 00:04:12,500
And then for our initial value for a product we're just gonna get an array there there's gonna be an

64
00:04:12,500 --> 00:04:15,550
empty array and the same thing is gonna be for the featured product.

65
00:04:15,890 --> 00:04:22,460
So we're gonna have both of them set equal to an empty array or our last state value is going to be

66
00:04:22,460 --> 00:04:23,510
featured.

67
00:04:23,510 --> 00:04:26,990
So it's gonna be the property name are featured.

68
00:04:26,990 --> 00:04:31,230
And then of course it's gonna be set featured as our function.

69
00:04:31,370 --> 00:04:37,910
And now instead of passing in simple string of hello or any kind of dummy data what we're gonna do is

70
00:04:37,910 --> 00:04:43,020
we're going to set our value equal to an object and then there's gonna be three properties we're gonna

71
00:04:43,040 --> 00:04:49,730
have products and again we're using the E six shorthand then we're gonna pass in the loading and all

72
00:04:49,730 --> 00:04:51,010
of them of course we're getting here.

73
00:04:51,470 --> 00:04:56,640
And then last one is gonna be our featured product.

74
00:04:56,660 --> 00:05:04,300
And lastly let's head over back to the product instead of again getting some meaningless greeting we're

75
00:05:04,300 --> 00:05:10,060
going to get a loading and product and just again showcase what we're getting back.

76
00:05:10,210 --> 00:05:15,760
For now I'm not going to destructor anything I'm just to show you a whole object so I'm gonna call this

77
00:05:15,820 --> 00:05:19,730
a response and then let's ride away maybe console log.

78
00:05:19,770 --> 00:05:21,250
So let's say response.

79
00:05:21,410 --> 00:05:24,550
And we should have an object with three values.

80
00:05:24,550 --> 00:05:25,060
So we're gonna.

81
00:05:25,070 --> 00:05:26,990
Product which is an empty array.

82
00:05:27,130 --> 00:05:29,810
Then we have the loading which is set to true.

83
00:05:29,920 --> 00:05:31,270
And then we have the product.

84
00:05:31,300 --> 00:05:35,730
So again if I would want to get one two or all three of them.

85
00:05:35,750 --> 00:05:38,040
Well the easiest way is just the structure.

86
00:05:38,380 --> 00:05:44,890
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

87
00:05:44,890 --> 00:05:46,820
the second one is product.

88
00:05:46,950 --> 00:05:49,510
And for the time being I'm not gonna do anything.

89
00:05:49,510 --> 00:05:55,050
But we have successfully set up some meaningful data within the product.

90
00:05:55,120 --> 00:05:58,000
So now we need to start working on fetching our product.