Beautiful.
We can display one job in our case, of course, that is the first job.
But if all this value around and I'll say for example one, then of course I'll see the second job from
my list.
Now, it would be awesome if we would the buttons for all the jobs that we have in the list.
And then once we click on a button, then, of course we change their state value.
And then the moment we do that, we also display a different job from our list.
Now, before we go any further, let me just tell you that, yes, EEOC right now, they're set up on
a bigger screen just because we haven't added the buttons.
So don't freak out.
We'll fix it in a second when we add the buttons.
And the way it's going to work is where we have the button container.
So at the moment, we just have the comment, but eventually will have the button container.
I'm going to add a div with a class of bittoun and then container.
Now in here I would want to iterate over jobs and then for every job I would want to display specific
button so each job should have that.
So I'm going to go here with jobs.
So I'll use the map of course, because I would want to wrap the values in some kind of meaningful return
button.
And then I'll also check for the index.
And this is going to be the case where index is going to be important.
So we're going to go here with the return.
We're returning a button for every item we have in the list.
And if you just want to see the item, you can choose whichever property you would want.
In my case, that is going to be a company.
So in here, go with item that represents that object.
But since we cannot randomly object and react, we would need to go with specific property.
So in my case, I chose the property of company.
So now as you can see, I have my buttons.
Now, of course, nothing is happening as I click on them, but at least I can see that I render button
for every job that I have in my list.
OK, that's awesome.
Now I also need to add a key because there's going to be a big fat warning.
If I don't turn here, I'm going to go with item and then that it since I know that that property is
on my object and now of course, I would want the unclick.
Now, I'm purposely not adding siestas yet because this is going to be a bit more interesting.
So I'm leaving that for the last for now.
I would just want to deal with on unclick where the moment I click on a button, I would want to grab
that index, which essentially just tells me where in the list of that particular job is sitting.
And then once I click on that button, I would want to change my value and that as I change the value,
also notice that, of course, our data will change because in here we're looking for jobs and then
whatever is the value.
So by default is going to be zero.
But then as we click on different buttons, also, the value instead will change and so will the values
for these properties.
All right.
So where I have the button.
Now, I would want to set up my own click show right next to the key I'm going to go with and click
here and I'll say that I'm going to have my line function on line.
We're going to go with set value and we'll pass in the index.
So I'm grabbing the index that represents the placement in the array.
And then once I click on my state value and as I change the state value, I also change what I might
display.
So if I click on this one, this represents right now this particular job, once I click on this one
and of course I have the third job and then once I click on the first one, then I display the initial
job that I rendered by default.
OK, that's good.
And also, if you take a look at the complete project, you'll notice that the item that I have clicked
on has this active class.
So as I'm hovering, there are some changes in sizes.
But also once I click on the item, I would want to apply some specific Cyesis.
So this is exactly what we're going to do where instead of just adding the success directly, like we
normally did with a class name, what I'm going to do over here is class name.
And then I would want to set up my template strand, and that's why I'm going to go back to JavaScript,
so I'll set up my earlier addresses and then by default, I would want to add the job between class.
So I'm going to go here with a job, my friend B10, so get some default styles right away.
But then since it is a template string, I can also check if the index is equal to the value, which
just simply means that this is the button that I have clicked on.
I also would want to add the active button class and the way we do that, we set up our interpolation
and inside we say if the index is equal to my current state value, then I would also want to add the
additional class.
So I'll use my and operator and I'm going to say active my friend B10.
So what I'm checking here is if the index of the button matches the current state value that I have
for my value, then of course I would want this active button if not marked for the rest of them, then
I'm not adding.
And then once I click on a button.
Notice how now for the second button index of that button matches my state value.
And that's why I'm adding that active button which I can navigate to a bigger screen.
I can check out how we display that specific job and we're also adding classes on the fly.
And if you're more interested, you can go to your console.
Not of course we're looking for we are looking for the section.
We have a job center and then we have the button container and notice here how we have job button,
false, false.
And then we have our active button.
So as I'm clicking notice how the placement of the active button class changes.
So it goes to the button that I have clicked on.
That's our project.
Hopefully everyone enjoyed it and I'll see you in the next project.