1
00:00:00,240 --> 00:00:04,030
Beautiful, and with this in place now, let's set up the button container.

2
00:00:04,470 --> 00:00:09,930
And in this video, we will rely on a radar from functionality.

3
00:00:10,320 --> 00:00:16,050
So if you need a refresher, please reference this video from the jazz nuggets.

4
00:00:17,000 --> 00:00:23,560
And basically, my idea is like this, where at the moment I have a number of pages, which is a number

5
00:00:24,170 --> 00:00:31,760
and I want to use a report from to create an array from that and then we'll iterate over that right

6
00:00:32,360 --> 00:00:39,860
inside of the button container and then we'll display the active button by checking whether the page

7
00:00:39,860 --> 00:00:47,960
number, which will reflect that page, is equal to the current page, which in our case is always going

8
00:00:47,960 --> 00:00:49,610
to be one for time being.

9
00:00:50,120 --> 00:00:54,110
But eventually, yes, this will be dynamic as well.

10
00:00:54,620 --> 00:00:59,930
So let's try doing that where we want to go back to the page, the container.

11
00:00:59,960 --> 00:01:01,370
We have a number of pages.

12
00:01:01,760 --> 00:01:03,060
And first, let's create that.

13
00:01:03,060 --> 00:01:06,200
The right, the buttons are right where I'm going to go with const.

14
00:01:06,680 --> 00:01:08,060
And let's call this pages.

15
00:01:08,390 --> 00:01:14,840
Let's use a right up front and inside of the array, not from we can in the object with a length property,

16
00:01:15,380 --> 00:01:18,740
and that one will be set equal to number of pages.

17
00:01:19,010 --> 00:01:23,630
And as a result, we're getting back array in there.

18
00:01:24,020 --> 00:01:27,620
We have items equal to whatever is the value.

19
00:01:28,010 --> 00:01:30,440
So if this is done, then we'll have 10 items.

20
00:01:30,560 --> 00:01:32,540
Not all of them will be undefined.

21
00:01:33,180 --> 00:01:36,950
And you can definitely check it out by console.log, but I'm not going to do that.

22
00:01:37,220 --> 00:01:42,970
And therefore we will do another thing where there's an option to pass in the callback function and

23
00:01:43,050 --> 00:01:48,050
then instead of the callback function, we can access the item, which we're actually not interested.

24
00:01:48,230 --> 00:01:50,000
That's why we'll go here with honor score.

25
00:01:50,270 --> 00:01:53,840
And then we also can get the indexing and using the index.

26
00:01:54,020 --> 00:01:59,750
Whatever we return from, this callback function will be placed over here inside of the pages.

27
00:02:00,170 --> 00:02:03,920
Now, since pages start with one, not zero.

28
00:02:04,010 --> 00:02:10,220
And since we know that in JavaScript, the arrays are zero index based when I want to return from this

29
00:02:10,220 --> 00:02:13,310
callback function is index plus one.

30
00:02:13,610 --> 00:02:16,790
And now I can log the pages and what you'll see.

31
00:02:17,700 --> 00:02:25,770
Is that it will reflect how many pages we have so notice over here, so I have eight pages and I'll

32
00:02:25,770 --> 00:02:27,810
display eventually eight buttons.

33
00:02:28,200 --> 00:02:34,560
So now let's go to our container, so let's keep scrolling here where we have the buttons.

34
00:02:34,860 --> 00:02:36,670
And now let's iterate over back.

35
00:02:36,740 --> 00:02:37,050
Right?

36
00:02:37,380 --> 00:02:38,930
Let me set up my expression.

37
00:02:38,940 --> 00:02:40,350
I'll say Pages map.

38
00:02:40,770 --> 00:02:43,050
So we're iterating over three pages.

39
00:02:43,050 --> 00:02:43,380
Okay?

40
00:02:43,740 --> 00:02:47,330
And then in order to access each and every item, I'm going to say page.

41
00:02:47,400 --> 00:02:52,290
And then, no, that essentially is going to be the name for my item.

42
00:02:52,590 --> 00:02:56,160
Then let's set up the return and then for every item.

43
00:02:56,400 --> 00:02:58,950
This is what I want in return, a button first.

44
00:02:59,340 --> 00:03:04,470
Let's add right away also a tie button, so type is equal to a button.

45
00:03:05,010 --> 00:03:11,070
And as far as the text and side of the button, all that will be equal to a page number.

46
00:03:11,520 --> 00:03:12,630
So it will be one.

47
00:03:12,630 --> 00:03:15,330
And then all the way through, I got to work and navigate here.

48
00:03:15,530 --> 00:03:18,210
Notice I'm displaying my buttons now.

49
00:03:18,360 --> 00:03:20,250
We have some warnings and all that.

50
00:03:20,250 --> 00:03:21,000
Don't worry about it.

51
00:03:21,540 --> 00:03:23,730
So the moment I can clearly see my buttons.

52
00:03:23,940 --> 00:03:26,850
Now there's no functionality, but that is still coming up.

53
00:03:27,360 --> 00:03:28,140
So what's next?

54
00:03:28,170 --> 00:03:34,560
Well, let's also add here a collapsed name, but this one will be dynamic where essentially I want

55
00:03:34,560 --> 00:03:39,930
to check if the page that I have in a state which again at the moment is going to be one.

56
00:03:40,140 --> 00:03:45,060
We haven't set up the functionality that changes that value, but eventually will.

57
00:03:45,720 --> 00:03:53,670
And if it is equal to the page number, so the number we're displaying, then we'll set up that button

58
00:03:53,880 --> 00:03:54,570
to be active.

59
00:03:54,570 --> 00:03:58,170
If not, then it's just going to have a page VTM class.

60
00:03:58,770 --> 00:04:03,060
And the way we do that, we go with page number is equal to.

61
00:04:03,900 --> 00:04:11,490
So if it is equal to a page, then let's go with two courses page at the end as well as the actor one.

62
00:04:11,940 --> 00:04:18,290
If it's not, then let's just go with page, began page and then biktima.

63
00:04:19,360 --> 00:04:26,610
And we also want to set up here the key because we have a list, and for that one, we'll just use the

64
00:04:26,610 --> 00:04:33,180
page number, which again is going to be starting with one and then whatever amount of the pages.

65
00:04:33,190 --> 00:04:37,620
So let's go here, Ricky and page and number.

66
00:04:37,860 --> 00:04:43,620
And lastly, once we click on a button for time being, we'll just log, but eventually there's going

67
00:04:43,620 --> 00:04:44,880
to be a functionality as well.

68
00:04:45,270 --> 00:04:51,180
So it's passing the function because we want to invoke it once we click here and let's just say here,

69
00:04:51,180 --> 00:04:55,110
counsel log and change page.

70
00:04:55,320 --> 00:04:56,280
So let's save that one.

71
00:04:56,520 --> 00:05:03,900
And what we should see is reverse where for every page, we have the button again, the moment.

72
00:05:04,290 --> 00:05:05,580
This will always be active.

73
00:05:05,790 --> 00:05:11,130
The first one, because that matches the state one, but the menu will change that one as well.

74
00:05:11,400 --> 00:05:17,550
And then if you click on any of them, you'll notice in the log We have change branch.

75
00:05:17,880 --> 00:05:23,430
And if I'm going to go and search for some kind of job now, I have one.

76
00:05:23,640 --> 00:05:30,720
Notice how we dynamically set up only two pages and we already know that if there's going to be only

77
00:05:30,720 --> 00:05:37,410
one page as far as the number of pages, then we won't display the button container all together.