We've got our stage component, our functionality works, we can actually display stars as well as the
reviews, but it is a bit too much copying and pasting to my liking.
So why don't we set this up programmatically?
Now, what I would want, though, is to at least cut out, not to delete one of the sponsors, one
off to do pretty much the same logic because we'll just insert these values dynamically.
So this is not going to be one and zero point five.
There's going to be some variables that we will use.
So for now, I would want to cut it out and maybe copy and paste over here.
So copy and paste.
And I would want to comment this out since I would want to reuse it a little bit later on the rest of
the stars.
Yes, I would want to remove.
So just leave the devil with a class and all that, but remove all the contents, I know what I would
want is to set up a new array using array that from.
So I'll call the STEM stars, whatever you like.
Again, don't use the stars because we already use this name coming as a prop.
So just be a little bit vigilant about that.
And then here I'm going to say array from.
So like I said, I'm creating a new array and I'm doing that using the array from method.
Now, since I know that I'm going to have five stars, I can right away pass in the object and the object
is going to have the length property of five.
Correct.
So now I know that I'll create an empty array with five items.
If you want to double check that, please do.
So we're going to go with temp stars and you'll see that we have empty array.
And of course, all the values will be undefined because we haven't set up anything now we know that
the second argument and already readout from is the callback function that we can call against every
item.
And the gotcha here is that, again, I don't care about the actual item, which is the first parameter
that will pass in the underscore because it's going to be undefined.
What I'm interested in is the index because again, I'll use that index and then for every item that
I have, I'll return either a four star, a half star or a empty star.
Now, what we need to understand, though, is that index is going to be between, what, zero and four?
Correct.
We're going to go to index and zero to four.
Now, if you don't believe me, again, in a combat function, we can just lock the index and you'll
see that it is going to be zero to four.
Now, don't worry about the fact that we are repeating here.
What we're interested in are these indexes.
So we have zero, one, two, three and four.
Why?
Because we have five items and arrays in JavaScript are zero indexed based.
So why don't we do this?
Why don't we set up one variable?
So this is going to be for that half star where I'm going to go with const number and that will be equal
to index plus zero point five, because what I would want is to get those number of values that are
zero point five, one point five, two point five and all the way up to the four point five, because
remember, we use them previously.
So now I'm just setting this up programmatically where I know that every time index will be changing.
So of course, this value will be also changing.
First case is going to be zero point five.
One point five.
And on and on and on.
So that's number one.
And then the second thing is, I would want to return from this callback function.
Of course, my spine, the one that I just set up as a comment.
So let me come on this one.
I'll cut it out and then copy and paste.
So now I'm returning the stars.
But of course, this is programmatic way, so I don't want to return one and zero point five push out.
I want to check what is the actual index or the number and where we'll set up.
The logic is following.
So say if Starz is bigger or equal to index plus one, why?
Because initially index is zero and I would want to start with one.
I would want to go from one to five.
So that's a start.
And then when it comes to this zero point five value, well, I'll just change it to a number.
Again, functionality is not changing.
The difference is that we are inserting these values dynamically.
I'm not hard coding them anymore.
I'm not inside of the stars.
I just simply want to say that I would want to render my temp stars.
All right.
That's it.
And then, of course, I'm going to get the complaint, because each child should have that key and
the only thing we need to do over here is just pass in the key and there will be equal to again, the
only thing we're doing over here is setting up the stars programmatically.
Instead of copying pasting, we're creating a new array.
We gave it a length of five because I know that I'm going to have five items and indexes are going to
be between zero and four.
And in every iteration, this index will change.
So it's going to start with zero and then all the way to the four.
Now, what I'm interested in are the values between one and five.
That's why I have this plus one here and I have this zero point five to the number.
OK, so I have my key in the first iteration.
Of course, the index will be zero.
So I'm going to check if the star is bigger than one, then show the full star.
If not, then of course that will be right away.
Half star.
And then once I get to the happy wall that I'm just checking whether the value is one point five zero
point five, two point five and all that, hopefully it makes sense.
Again, we're just speed up a little bit of copying and pasting and we should be in good shape where
we can display nicely stars.
So let me just double check.
So in this case, I would want to see maybe this guy over here.
There is now this one has to start again.
If you want to double check that, please do so.
But I'm going to be confident that functionality is correct and we can move on to the next step.