Beautiful.
And once we have the general structure in place now, let's get moving and set up those select ones.
And first, like I said, will heart code one inside of the Ajob and then we'll set up a separate component.
So we simply want to take a look at it in the solution, and then we'll put two and two together where
it's going to be a select form combined, essentially just like we have with forming both.
Now how do we set it up?
We go with Dev, with hormone.
So that's going to be the styling.
Then we want to go with label, which essentially is going to be for the job type.
Therefore the optimal forest for job type, class name again.
Global styles form label and then we pass in the name.
After that, when it comes to select, I mean, pretty much everything is the same.
We go with name chicken needs to match state value to the.
Exactly.
And we also want to go with value.
So how is going to be the actual property value on change?
Same deal.
How job input.
Again, we'll take a look at the event and more specifically, name and value and a little bit of styling.
So go with form select.
Now, when it comes to select, remember essentially is just a bunch of options.
And also, remember that we have those options already in the array in the state.
So here's what we want to do inside of these select I want to grab my array.
I want to reiterate over and I'll have access to two things have access to the actual string value,
which in my case, I'm going to call items since we will move it to a separate component as well as
the index.
Why?
Well, because we have a list there.
So in React, we need to add the key prop and pass in the unique value, which in our case is going
to be the index.
And then as far as the value for the option, for the option element over here, well, we'll use the
string value.
And as far as the text inside, I will also be destroyed.
And again, just to reiterate, what string value am I talking about my go to context and context more
precisely.
And then we're talking about these two sectors over here job type options and status options versus
where we have the list and therefore we are setting up that select component.
So let's go to the ad and jump and where I have the job type for time being said, we will hot code
everything.
So I'm going to say with former all that's the styling and right away label HDMI for this case is going
to be job type.
Eventually, it's going to be equal to a prop class name equals to what form label here and line inside
of the label and just go with job and type.
Then right below it, we're going to go with our select Senate section, select and then as far as the
name, well, that won't be equal to a job type on.
Not going to repeat why it's so important to have the same name.
Hopefully that is clear.
Then we also want to go with value pretty much the same like we have for input.
And let's go here what job type and we also want to go with on change.
So at the moment, it's going to be any change.
Eventually, it's going to be exactly like our form input and that one will be equal to handle job input.
And then lastly, I want to add a little bit of styling and we're going to go with form and select.
Let's take a look what we have.
I mean, yes, I know we still need to iterate over our list, but let's just take a look.
And here I do have the job right now.
As you can see, I have nothing inside.
And as far as the inside content, well, this is where I'll grab my job type options, Myra iterate
over.
We know that we can access the item, and I'm just going to call this item value here pretty generic.
And then we're going to be looking for index.
And also, as far as the return, well, this is where we'll go with option.
So are option element.
And then let's add a key.
A Senate equal to an index, not as far as the value will go with item and not value, and when it comes
to text Sam, the item and value lets service.
And if everything is correct and this is what you should see, you should see full time because that's
the default value in the state.
And then we have the rest of the options.
And if that's the case, we're done with a basic setup.
And in next video, we'll move it into a separate component.
And the other one are the job status, I believe one as well.