All language subtitles for 14. Computing the Class Names

In this video.

What we're going to do is we're going to solve this styling issue that we are facing currently.

So you can see right now everything has a border radius to the left, which is not what we want.

Instead, what we want is a border radius to the left for the leftmost button and no border radius for

anything in the middle.

And then at the very rightmost button, we should have a border radius to the right.

So if we're thinking right away, there actually is a way to accomplish this.

So let's go over here to our point of view and let's look at these buttons over here.

So very simply, what we can do here is we can check the index of the element that we are iterating

over.

So remember over here we're iterating over the buttons.

So the button's right over here and then we're rendering obviously a button for each one.

Now, what we can also do over here inside of our v4 is grab the index of the element that we are iterating

over so we can grab that index.

Now over here we can check.

Okay, if the index is zero, that means it is going to be the leftmost button and we need to apply

the option left class.

If it's somewhere in the middle, then we don't want to apply that.

And if it's all the way to the right, meaning that it is the length of the array minus one, because

index is work 012 this is going to be the length of three, so minus one it's going to be two.

That means that this is at the very end and we should apply the option right class.

So that is what we're going to need to do.

We're going to need to create a function that is going to compute our class.

However, it's a little bit more complicated because right over here we're also doing another computation

to determine the class.

Right over here, we're computing if this is the active class and then we're providing the option active.

So we actually need to also include this right over here inside of our computation.

So let's actually go ahead and create a function for this.

So I'm going to go ahead and I'm going to create a function and I'm going to say I'm going to call this

compute button classes like so.

And this is going to take two values in the value and it's also going to take in the index.

So the first thing that I want to do is I want to define all of the class names in an array because

again, we could have multiple different class names that we want to add.

For example, we could want to add in this case, for example, we want to add the option left as well

as the option active.

However, for other ones, we might just want to add option left or option active only.

But again, we could have multiple or we could just have one.

So if we have multiple, I just want to store them in an array.

If you also have one, I'll just store that one element in that array as well.

So the first thing that I want to do is let's actually just do this check right over here.

And if this check this check right here is true, then I'm going to go ahead and push the option active

into this array.

So I'm going to say if and I'm going to get access to the props here.

So I'm going to say props.

And then over here I can pretty much just copy this check right over here.

I can say if props and then.

So if probes dot options and then over here we can say probs dot option dot category is equal to the

value that we're going to pass in.

Then what do I want to do?

Well, I'm just going to say class name, dot push and then of course, I'm going to push option active.

Okay.

So that's the that's pretty much all it is that we need to do to handle the active class.

Now, what we want to do is we want to start handling the either option left or option right class.

So this was actually pretty easy.

This is where we're going to start using the index.

So we're going to say if the index is equal to zero, that means this is going to be the leftmost button.

Then what we're going to do is we're going to say class names, dot push.

And over here we're going to say option left.

That's what we want to push.

Now let's handle the rightmost button.

So over here, what we're going to do is we're going to say if index is equal to props.

Dot option.

Dot button's dot length minus one.

Then what we're going to do is we're going to say class name, dot push.

And then over here we're going to say option, right?

Like so.

So this is going to give us an array of different classes, but obviously we cannot put that array inside

of our class.

We need a string for this.

So at the very end, what we're going to do after we've done all these if statement, all these conditional

checks, all we're going to do is we're going to return class name and then dot join and then we're

going to join with a space.

So what this is going to do is let's say we have an array like this option active and then over here

we have option.

Option left?

Well, this is going to do it is going to take this first element and it's going to put it inside of

a string.

So it's going to say option active, and then it's going to take this element and also put it in the

string.

But before it does that, it's going to apply whatever we put over here, which is a space.

So it's going to say space and then option left.

And that's exactly how we're going to apply classes.

So over here we can get rid of that.

Now, what we can do here is actually grab this compute button class and right over here, inside of

this class, we can just invoke it and we can pass that value in as well as the index.

So now if you come back here and do a quick refresh.

Let's do that little quick refresh.

So seems as though we have a little bit of a bug here.

Let's see why that is.

We're still getting some of that.

Uh, we're still getting some, uh, a radius to the left here.

However, we're not getting anything here.

Not going to be anything here.

So it seems something in the middle is messing things up.

So if the index is equal to zero.

Okay.

So for some reason, we're hitting this block right here.

So let's actually see why we're doing that.

So what I'm going to do here is I am going to console oh, I know exactly why this is happening.

We need to remove this right here.

So let's go ahead and remove that and there we go.

So, yeah, that was pretty much.

I accidentally left that cluster.

But now there we go.

So you can see that that is working.

And let's just look at actually how much lines of code we save.

So we were at 2a1, and now we're at 129.

That's because now we extracted a lot of these h html as well as the assets into their own file, which

is going to make our code significantly more reusable.