1
00:00:00,180 --> 00:00:05,140
With our pageant functionality in place pick whichever method you prefer.

2
00:00:05,340 --> 00:00:12,030
Whether you prefer splice or whether you prefer slice and then instead of returning the products which

3
00:00:12,030 --> 00:00:13,660
of course was our origin.

4
00:00:13,650 --> 00:00:14,360
All right.

5
00:00:14,600 --> 00:00:20,850
Now to return new product I'm going to remove the console log and of course I'm going to say new products

6
00:00:21,120 --> 00:00:24,190
and I can tell you right away that our application is going to break.

7
00:00:24,240 --> 00:00:27,810
So I'm going to say it and we're gonna have a big factor.

8
00:00:27,840 --> 00:00:31,790
Now what's saving us is of course that we use the prop types.

9
00:00:31,830 --> 00:00:37,350
Remember we used the prop types and default props but if you check it out on a bigger screen you're

10
00:00:37,350 --> 00:00:43,890
clearly going to see that which is going to have some default title with zero as well as default image.

11
00:00:43,890 --> 00:00:45,500
Now we need to fix that.

12
00:00:45,570 --> 00:00:52,140
So in order to do that we're going to had to page product and now let's take a look at what we're getting

13
00:00:52,140 --> 00:00:54,780
back assorted and we should already know that.

14
00:00:54,840 --> 00:00:57,460
Of course we're getting our array of arrays.

15
00:00:57,600 --> 00:01:00,040
So we're going to go log on.

16
00:01:00,160 --> 00:01:00,860
So right.

17
00:01:00,870 --> 00:01:03,630
And don't worry about these warnings here and console.

18
00:01:03,660 --> 00:01:04,470
It doesn't really matter.

19
00:01:04,470 --> 00:01:05,910
We're going to fix it in a second.

20
00:01:06,060 --> 00:01:13,510
And up on the top you can see that initially it is an empty array and then I have my arrays offering.

21
00:01:13,530 --> 00:01:19,740
Now remember also that within the product list what we're doing and let's just jog our memory.

22
00:01:19,740 --> 00:01:26,000
We have product list we're getting our products and then we just iterate over our product.

23
00:01:26,070 --> 00:01:30,930
Okay then for each and every iteration we return the product component.

24
00:01:31,050 --> 00:01:38,640
So in order to fix that of course since I have the array of arrays where I have the page product instead

25
00:01:38,640 --> 00:01:46,230
of passing in sorted and then just pass it as an array we're going to pass it in whatever item we would

26
00:01:46,230 --> 00:01:46,500
want.

27
00:01:46,500 --> 00:01:48,580
Remember we have the array of arrays.

28
00:01:48,750 --> 00:01:57,060
So we have sorted 0 sorted one sorted three or whatever up to whatever number we would want in our items.

29
00:01:57,060 --> 00:02:03,020
So in this case since I have four items I'm going to zero one two and then three.

30
00:02:03,210 --> 00:02:08,500
And since I would want to first display my first four items I'm gonna pass here zero.

31
00:02:08,520 --> 00:02:15,030
Now I could pass Zero but also remember that we had a page that was the State Bar and the value for

32
00:02:15,030 --> 00:02:16,500
the page was also zero.

33
00:02:16,500 --> 00:02:22,320
So in this case we're going to make this interesting where I will say Get me sorted and then passing

34
00:02:22,500 --> 00:02:26,710
the first item so array of four items.

35
00:02:26,760 --> 00:02:33,610
So instead of passing in the whole sorted I'm just passing in the first array within my sword since

36
00:02:33,620 --> 00:02:35,720
sort of right now is our average.

37
00:02:35,820 --> 00:02:41,550
And when you do that your application completely breaks and you're like okay what on earth is happening

38
00:02:42,060 --> 00:02:43,200
now let's think about it.

39
00:02:43,350 --> 00:02:44,420
What is sorted.

40
00:02:44,460 --> 00:02:46,830
Initially it is an empty array.

41
00:02:47,250 --> 00:02:54,840
So if that passing sorted and then look for zero indexed item what I'm getting there.

42
00:02:54,840 --> 00:03:02,160
Well what react is complaining is that well you can't iterate over nothing because essentially initially

43
00:03:02,160 --> 00:03:03,400
it is an empty array.

44
00:03:03,570 --> 00:03:10,590
And then of course if I'm accessing empty array and then zero in next based item within that empty array

45
00:03:10,980 --> 00:03:12,270
of course it fails.

46
00:03:12,720 --> 00:03:16,890
So in this case we're going to have to do a bit differently where we do the checking where I'm going

47
00:03:16,890 --> 00:03:24,750
to say if sorted page is undefined which initially is the case by the way you can do it here and say

48
00:03:24,750 --> 00:03:29,520
sorted page and you're going to see that initial value is gonna be undefined because again initially

49
00:03:29,520 --> 00:03:36,330
it is an empty array then we would want to display some kind of text that I don't know we haven't gotten

50
00:03:36,330 --> 00:03:37,350
our items yet.

51
00:03:37,350 --> 00:03:41,440
And then if the actual sorted page is defined already.

52
00:03:41,640 --> 00:03:47,510
So it is already array of arrays then we're going to use of course our product list.

53
00:03:47,640 --> 00:03:54,720
Now also keep in mind that where we have the products context technically you could set this up array

54
00:03:54,720 --> 00:03:57,160
of arrays technically that would save you.

55
00:03:57,450 --> 00:04:03,420
Now in my case though if we're using filters anyway there's gonna be cases where I would just want to

56
00:04:03,420 --> 00:04:06,120
show you that we don't get any items right.

57
00:04:06,450 --> 00:04:11,950
So if I'm going to go with computer then I notice how computer and then zero to three hundred.

58
00:04:12,000 --> 00:04:15,820
Unfortunately your search query did not return any product.

59
00:04:15,900 --> 00:04:22,410
So this is what I would want to show initially when we're still loading up the products of course after

60
00:04:22,410 --> 00:04:26,910
the loading has been displayed and all that and planning for searching for something then we're going

61
00:04:26,910 --> 00:04:31,440
to have unfortunately your search query did not return any product.

62
00:04:31,440 --> 00:04:38,430
So with all this being said where we have the page product instead of just returning the product list

63
00:04:38,880 --> 00:04:48,180
we're going to set up our if state where I'm going to say if if sorted page is undefined then we're

64
00:04:48,180 --> 00:04:53,060
going to return one thing and if it is defined then we're going to return our list.

65
00:04:53,130 --> 00:04:57,630
So let's move this up like so and then we're going to write else.

66
00:04:57,660 --> 00:05:03,550
So if it is defined I'm sorry if it is undefined then I would want to return my texts.

67
00:05:04,020 --> 00:05:08,700
So I'm going to go with else return adding three.

68
00:05:08,700 --> 00:05:15,810
And then here we're going to have some class name just for styling search errors and then as a text

69
00:05:15,810 --> 00:05:29,460
we're going to write unfortunately not Lee and then we have your search query did not return any products.

70
00:05:29,500 --> 00:05:36,090
So essentially what I'm trying to do here is shoot two birds with one stone where this of course is

71
00:05:36,090 --> 00:05:38,400
gonna be displayed where we're using the filters.

72
00:05:38,400 --> 00:05:39,960
But I'm just checking here.

73
00:05:40,140 --> 00:05:47,130
I'm saying okay if salt pages undefined which initially is gonna be undefined and just show this guy

74
00:05:47,430 --> 00:05:52,860
but you honestly this is mostly going to show only if we cannot find our filters.

75
00:05:52,860 --> 00:05:58,500
But then of course if everything is fine once we have loaded the product once we have run through the

76
00:05:58,500 --> 00:06:01,950
pageant function then we're going to display our product.

77
00:06:01,980 --> 00:06:09,390
So I'm going to remove the console log on like so and then if we're going to head back to our project

78
00:06:09,510 --> 00:06:10,400
we're looking for.

79
00:06:10,410 --> 00:06:12,970
Notice how I'm displaying four items.

80
00:06:13,050 --> 00:06:19,560
Now also notice that of course the reason why I'm doing that is because I'm accessing my item with a

81
00:06:19,560 --> 00:06:20,640
zero index.

82
00:06:20,640 --> 00:06:27,180
If we're gonna head back to products and if we're going to change the initial value for the page then

83
00:06:27,180 --> 00:06:32,340
I'm going to of course show different products correct each and every time we're going to change the

84
00:06:32,340 --> 00:06:32,940
product.

85
00:06:32,940 --> 00:06:38,010
And this is essentially how we're gonna do our functionality where we have a state value.

86
00:06:38,010 --> 00:06:41,700
And then of course we have that page and then we have our function.

87
00:06:41,700 --> 00:06:45,720
We have change page which currently is just displaying whatever index.

88
00:06:46,080 --> 00:06:53,040
But once we're gonna set up our buttons once we control this value there's zero right now then we're

89
00:06:53,040 --> 00:06:54,810
going to be displaying different pages.

90
00:06:54,810 --> 00:07:02,100
So initially we're just showing the items that are within the zero index then I don't know one and then

91
00:07:02,100 --> 00:07:08,670
two and whatever items we have in disarray and as you can see our initial setup finally works where

92
00:07:08,990 --> 00:07:17,640
we're not displaying all the items instead since we have array of arrays displaying the items that are

93
00:07:17,730 --> 00:07:23,970
sitting within the array that has a zero index within my new sorted array.