1
00:00:00,900 --> 00:00:06,030
We've got our stage component, our functionality works, we can actually display stars as well as the

2
00:00:06,030 --> 00:00:11,880
reviews, but it is a bit too much copying and pasting to my liking.

3
00:00:12,270 --> 00:00:15,580
So why don't we set this up programmatically?

4
00:00:15,990 --> 00:00:23,350
Now, what I would want, though, is to at least cut out, not to delete one of the sponsors, one

5
00:00:23,390 --> 00:00:28,360
off to do pretty much the same logic because we'll just insert these values dynamically.

6
00:00:28,740 --> 00:00:31,200
So this is not going to be one and zero point five.

7
00:00:31,470 --> 00:00:34,410
There's going to be some variables that we will use.

8
00:00:34,650 --> 00:00:39,810
So for now, I would want to cut it out and maybe copy and paste over here.

9
00:00:40,350 --> 00:00:41,550
So copy and paste.

10
00:00:41,850 --> 00:00:47,820
And I would want to comment this out since I would want to reuse it a little bit later on the rest of

11
00:00:47,820 --> 00:00:48,230
the stars.

12
00:00:48,240 --> 00:00:49,620
Yes, I would want to remove.

13
00:00:51,240 --> 00:00:58,730
So just leave the devil with a class and all that, but remove all the contents, I know what I would

14
00:00:58,730 --> 00:01:03,950
want is to set up a new array using array that from.

15
00:01:04,400 --> 00:01:08,120
So I'll call the STEM stars, whatever you like.

16
00:01:08,150 --> 00:01:12,560
Again, don't use the stars because we already use this name coming as a prop.

17
00:01:12,570 --> 00:01:16,420
So just be a little bit vigilant about that.

18
00:01:16,760 --> 00:01:19,550
And then here I'm going to say array from.

19
00:01:19,550 --> 00:01:25,390
So like I said, I'm creating a new array and I'm doing that using the array from method.

20
00:01:25,820 --> 00:01:31,760
Now, since I know that I'm going to have five stars, I can right away pass in the object and the object

21
00:01:31,760 --> 00:01:33,920
is going to have the length property of five.

22
00:01:34,220 --> 00:01:34,590
Correct.

23
00:01:34,850 --> 00:01:39,740
So now I know that I'll create an empty array with five items.

24
00:01:40,010 --> 00:01:41,930
If you want to double check that, please do.

25
00:01:41,940 --> 00:01:47,030
So we're going to go with temp stars and you'll see that we have empty array.

26
00:01:48,190 --> 00:01:53,950
And of course, all the values will be undefined because we haven't set up anything now we know that

27
00:01:53,950 --> 00:02:00,850
the second argument and already readout from is the callback function that we can call against every

28
00:02:00,850 --> 00:02:01,210
item.

29
00:02:01,630 --> 00:02:07,450
And the gotcha here is that, again, I don't care about the actual item, which is the first parameter

30
00:02:07,660 --> 00:02:11,420
that will pass in the underscore because it's going to be undefined.

31
00:02:11,830 --> 00:02:20,140
What I'm interested in is the index because again, I'll use that index and then for every item that

32
00:02:20,140 --> 00:02:26,660
I have, I'll return either a four star, a half star or a empty star.

33
00:02:26,980 --> 00:02:32,620
Now, what we need to understand, though, is that index is going to be between, what, zero and four?

34
00:02:32,860 --> 00:02:33,180
Correct.

35
00:02:33,280 --> 00:02:36,330
We're going to go to index and zero to four.

36
00:02:36,590 --> 00:02:41,920
Now, if you don't believe me, again, in a combat function, we can just lock the index and you'll

37
00:02:41,920 --> 00:02:44,620
see that it is going to be zero to four.

38
00:02:44,680 --> 00:02:46,990
Now, don't worry about the fact that we are repeating here.

39
00:02:47,320 --> 00:02:50,010
What we're interested in are these indexes.

40
00:02:50,020 --> 00:02:53,530
So we have zero, one, two, three and four.

41
00:02:53,560 --> 00:02:53,950
Why?

42
00:02:54,250 --> 00:03:00,180
Because we have five items and arrays in JavaScript are zero indexed based.

43
00:03:00,790 --> 00:03:02,640
So why don't we do this?

44
00:03:02,650 --> 00:03:05,160
Why don't we set up one variable?

45
00:03:05,470 --> 00:03:11,260
So this is going to be for that half star where I'm going to go with const number and that will be equal

46
00:03:11,260 --> 00:03:19,690
to index plus zero point five, because what I would want is to get those number of values that are

47
00:03:19,900 --> 00:03:25,030
zero point five, one point five, two point five and all the way up to the four point five, because

48
00:03:25,030 --> 00:03:26,990
remember, we use them previously.

49
00:03:27,220 --> 00:03:32,380
So now I'm just setting this up programmatically where I know that every time index will be changing.

50
00:03:32,590 --> 00:03:34,630
So of course, this value will be also changing.

51
00:03:34,960 --> 00:03:36,780
First case is going to be zero point five.

52
00:03:37,030 --> 00:03:37,790
One point five.

53
00:03:38,050 --> 00:03:39,350
And on and on and on.

54
00:03:39,460 --> 00:03:40,420
So that's number one.

55
00:03:40,750 --> 00:03:45,040
And then the second thing is, I would want to return from this callback function.

56
00:03:45,290 --> 00:03:50,280
Of course, my spine, the one that I just set up as a comment.

57
00:03:51,100 --> 00:03:52,510
So let me come on this one.

58
00:03:52,960 --> 00:03:55,640
I'll cut it out and then copy and paste.

59
00:03:55,660 --> 00:03:57,100
So now I'm returning the stars.

60
00:03:57,550 --> 00:04:04,870
But of course, this is programmatic way, so I don't want to return one and zero point five push out.

61
00:04:04,900 --> 00:04:10,330
I want to check what is the actual index or the number and where we'll set up.

62
00:04:10,510 --> 00:04:11,940
The logic is following.

63
00:04:12,370 --> 00:04:19,930
So say if Starz is bigger or equal to index plus one, why?

64
00:04:20,380 --> 00:04:24,250
Because initially index is zero and I would want to start with one.

65
00:04:24,700 --> 00:04:27,370
I would want to go from one to five.

66
00:04:27,760 --> 00:04:28,530
So that's a start.

67
00:04:28,870 --> 00:04:34,090
And then when it comes to this zero point five value, well, I'll just change it to a number.

68
00:04:34,480 --> 00:04:37,290
Again, functionality is not changing.

69
00:04:37,300 --> 00:04:41,710
The difference is that we are inserting these values dynamically.

70
00:04:41,980 --> 00:04:43,630
I'm not hard coding them anymore.

71
00:04:43,960 --> 00:04:45,520
I'm not inside of the stars.

72
00:04:45,850 --> 00:04:50,950
I just simply want to say that I would want to render my temp stars.

73
00:04:50,950 --> 00:04:51,370
All right.

74
00:04:51,520 --> 00:04:52,000
That's it.

75
00:04:52,840 --> 00:04:59,140
And then, of course, I'm going to get the complaint, because each child should have that key and

76
00:04:59,140 --> 00:05:06,040
the only thing we need to do over here is just pass in the key and there will be equal to again, the

77
00:05:06,040 --> 00:05:11,020
only thing we're doing over here is setting up the stars programmatically.

78
00:05:11,020 --> 00:05:14,590
Instead of copying pasting, we're creating a new array.

79
00:05:15,010 --> 00:05:21,010
We gave it a length of five because I know that I'm going to have five items and indexes are going to

80
00:05:21,010 --> 00:05:23,170
be between zero and four.

81
00:05:23,410 --> 00:05:27,310
And in every iteration, this index will change.

82
00:05:27,490 --> 00:05:30,870
So it's going to start with zero and then all the way to the four.

83
00:05:31,180 --> 00:05:35,620
Now, what I'm interested in are the values between one and five.

84
00:05:35,830 --> 00:05:42,490
That's why I have this plus one here and I have this zero point five to the number.

85
00:05:42,770 --> 00:05:46,570
OK, so I have my key in the first iteration.

86
00:05:46,570 --> 00:05:48,210
Of course, the index will be zero.

87
00:05:48,520 --> 00:05:52,960
So I'm going to check if the star is bigger than one, then show the full star.

88
00:05:52,970 --> 00:05:55,240
If not, then of course that will be right away.

89
00:05:55,240 --> 00:05:55,780
Half star.

90
00:05:56,140 --> 00:06:02,980
And then once I get to the happy wall that I'm just checking whether the value is one point five zero

91
00:06:02,980 --> 00:06:06,550
point five, two point five and all that, hopefully it makes sense.

92
00:06:06,800 --> 00:06:12,280
Again, we're just speed up a little bit of copying and pasting and we should be in good shape where

93
00:06:12,280 --> 00:06:14,490
we can display nicely stars.

94
00:06:14,820 --> 00:06:16,180
So let me just double check.

95
00:06:16,960 --> 00:06:20,320
So in this case, I would want to see maybe this guy over here.

96
00:06:20,360 --> 00:06:23,650
There is now this one has to start again.

97
00:06:23,650 --> 00:06:25,870
If you want to double check that, please do so.

98
00:06:26,110 --> 00:06:33,040
But I'm going to be confident that functionality is correct and we can move on to the next step.