All right.
And up next, let's set up to select the inputs, one for job status and the other one for job type.
Let's start by hardcoding it in the Add job and then we'll create the component.
So first, let's navigate to the page and still within the div, basically right after the last form
row.
Now let's go with another div.
Like I said, for now we'll just hard code over here.
And this is going to be div with a class of form row.
Then we want to set up the label.
Html4 is going to be job status since that's going to be my ID.
Then we also want to add the class name.
We'll set it equal to form hyphen.
Label.
And as far as the value go with job status, let's save it.
And then right after that, we want to go with select input.
Name will be job status.
So essentially this is what we're going to be sending back to the server.
Since the HTML four in the label is already job status, we might as well use the same one over here
for ID.
We do want to add a class that will be form hyphen.
And select.
And then we want to set up the default value.
So this will be our default option.
So let's go with default value.
And then in this case, we're looking for the job status.
So that's the object coming from the utils.
And as far as the default value, in my case, I'm going to go with pending.
And then here we can either hardcode.
So essentially it's going to look like this if we go with option and then we provide the value or we
can just iterate over and what are we iterating over?
Well, the job status, remember, it's the object with all of the properties that we're interested.
And in order to set it up as an array, same deal.
We want to go here with object dot values.
So now we're accessing only the values.
And you know what?
Let me just quickly showcase.
So again, we're talking about these constants, correct?
So we have job status.
That's our object.
And I'm interested only in these values.
So I want to set it up as an array.
I want to iterate over and then pretty much for every.
Value.
I want to return an option element.
So let's pass here job status.
Now we're iterating over by setting up the map in a callback function.
I'm just going to call this item value.
And then as far as what we want to return, we're going to go again with option element.
We do need to provide a key since we have a list and I'm just going to use the item value.
That.
Also, let's set up the actual value which will be equal to item value to our string basically.
And then I want to display that value here as well.
So I'm going to go with item and value.
Let's navigate back to our project and check it out in the browser.
Notice I have the job status and the default value over here is pending and these are the options that
I have because those are the values in my object.
Now, of course, if I'm going to change this around and if I'm going to go with, let me check what
are the other options?
Interview, for example.
So I'm going to set it up over here.
We refresh and now the default value will be interview.
So this is totally up to you.
I'm just going to go with pending over here.
Now, this is nice, but of course we can.
Place this functionality in the separate component, and that way it's just going to be easier to reuse
it.
So let's start I guess, by grabbing this entire div over here.
Let's cut it out.
We want to go to components first.
We want to create one and we're going to go with form row and select.
Gsx.
Then let's create the component.
And then as far as what we're returning, well, let's just copy and paste and then the same deal.
I want to set up the props we're going to pass in and then we're just going to make all of these dynamic.
So one by one, let's look for name.
We'll also pass in eventually label text.
Now, as far as this one, I'm going to call this list.
So this is what we're going to pass in and then default value.
And I'm just going to set it equal to an empty string.
So essentially this is a default parameter syntax in JavaScript.
So if no value is provided, I'm just going to set it equal to an empty string, which is basically
the alternative that we used over here.
Remember, in here I use default value and if there is no value, I went with empty string.
So this is also a syntax you can use.
Then let's go to our return.
So we have form, row, form, row.
And now let's just make these values dynamic.
And here we're looking for name.
Class stays the same.
Remember we have the label text just in case.
So say if there is some value, we'll use that.
If not, then we're going to go with name.
And then let's go down the list.
This is also equal to name.
Same deal with ID.
It's going to be cool to a name and then default value, well, we'll pass it in.
Correct.
So the default value here as well.
And then instead of again, hardcoding the job status and all that.
I'm just going to change it around.
I'll say that eventually there's going to be a list.
And now let's navigate back to our Or.
You know what?
No, we cannot do that.
Actually, we still need to copy and paste over here.
Then let's call this form row select.
Let me just double check whether we're exporting.
Yep, everything is correct.
So now let me close this one.
And then.
We want to.
Select these two.
Let's call this form row.
And select.
And then we want to navigate to our job and we want to grab that component as well.
So we're going to go with former Select.
Then let's scroll down and let's set up those two components.
So right after the job location.
Let's go with Form row, select, and let's just provide these values.
Let's start here with label text, which is going to be equal to job status.
Then we want to go with name and this will be equal to a job status.
However, in this case I go with camel case, then default value will be equal to my job status and
let's provide again the pending one and then list will be equal to object dot values and job status.
So let's go here with object dot values and then we're looking for job status.
Let's save it.
I just want to close it here and basically let's copy and paste and just change what we've got over
here.
So instead of job status, this will be equal to a job type.
Then of course, we want to change the name here as well.
So that will be equal to a job default value.
So I'm going to be pending.
And actually job status is also not going to be here.
We're going to look for job type dot and then full time.
And then lastly, let's go with.
The job type.
So I want to pass here this object just so I can get the values.
With this in place, we should be done.
Let me again navigate.
Let me log in and check it out.
So this is going to be my ad job setup.
And up next, we're going to.
Work on the action.
Basically, we want to grab all of these values and send it to a server in order to create the job.