All right, and once we have looked at how we can hard code our select one inside of the ad.
Well, let's create a component just in case we ever need to rehearse it that way again.
Every time we'll need it in our application, we're going to simply grab our component just like we're
doing with our format.
And then just set it up in the page or I don't know any other component in a matter of seconds.
And first, here's what I want to do.
I want to create a form row, select in the components.
So let's start with that.
So form row and select address.
Let's create that component.
I'm going to go with our function in this case.
Let's say it, once right away, shut up all the imports and exports.
So say here, select.
Select stuff.
Let's say that one and then we want to go to index, we want to go off course with our form rule and
then select former and select import that.
And then let's also right or set it up over here.
So I mean, I'm going to places right after the sidebar because I'm annoying that I worry, but you
don't have to worry so long as it's in the object.
Then let's navigate through the ad job and right after lifeform form wrong.
Let's go with our former select and let's add a comma so we don't have any bugs.
Let's keep on scrolling.
And instead of this job type over here, we're going to grab this, hold their mark.
So and we'll just cut it out.
So I cut this one out.
OK, good.
And then let's go to the form row select.
And I was thinking, I'm going to render it, but I guess it's not going to be the case.
Let me just copy and paste.
And now it's again discuss.
What do we want to set up as far as the props?
So let's say and then let's go line by line.
I definitely want to display here the name as far as the label, because that will match to whatever
I have over here.
But again, there might be a case where my name is dropped out, so it wouldn't make more sense if,
again, we set up that label text and I think it does.
So I'm going to go with my label text and then where I have the text for the label, I'm going to go
with my label text or the name, which is another prop that we will pass in to see if the label text
exists.
Awesome.
We use that one.
If not, we'll use the name.
Now, when it comes to Animal four, you know it's not going to be any more hardcoded chopped up, correct?
Now have a name because you have multiple select inputs.
Then let's keep on moving.
What else we want to set up over here?
Well, again, we have the name what is not going to be equal to to the name?
OK, and now we come to the value.
So right after that name will also look for the value.
So instead of job type, we'll go with value than we have on change.
What is not going to be equal to men?
Let's set up the same function, say I know and then change.
Now, instead of handling job input, which is going to be only in the add job, we'll go with handle
change, which we can pass in from any component.
And then let's keep on scrolling.
And now we have these job type options.
Now what is that going to be?
That's going to be a list.
So each and every time we can pass in some kind of array of items.
And yes, I mean, in this case, it does assume the fact that it's going to be strength.
So if it's going to be an object, either you have to set up a different component or stuff along those
lines.
So again, if you are reusing that in your own project, just remember that one.
And let's go here with list.
I will keep the item value and index the same.
I just don't think there's any need to change that one.
So let's save it right now.
Let's go back to add job, and here we'll have two of them.
We'll have one for status and then one for the job type.
Now the order is really up to you.
Let me just double check thing in here.
I have the status first and then the job type, so I'll keep it the same, I guess.
So I messed that up a little bit where I'm going to go with job status.
Now I'm looking for form or select when we want to go with the name just going to be equal to this status
one.
After that, we want to provide some kind of value, which is going to be equal to a start.
And then we also have handled change that is equal to what to the panel job and input.
That's the function name.
And then we also have a list, perhaps what we're providing.
And in here, as far as the list, I'm going to go with status and line options.
So status options, I provide my array that should do it for job status.
Now I can simply take this one copy and paste, and we just need to change some powers around where
this is not going to be status.
We're looking for the job and type, then I do want to add the label text.
So in this case, I'm going to go with just type label text and set up the type here.
Or, I mean, if you want, you can write here, drop that.
But I think I'm going to leave it as a type value.
Well, that is going to be equal to my job type property.
Coming from state handle job input doesn't change.
The array does.
So in this case, we'll go with job type and we're looking for options.
And let's maybe out here, comment V10 container.
And once we have this one in place, once we navigate back to the browser.
Check it out.
We have two of them.
We have one, for starters, and one for job type.
And you know what actually changed my mind?
It's not going to be just type.
I will go with job type.
And once we have set up both select as a separate component and we're rendering it in at job.
Now move on to the next step, which is going to be setting up a global function that handles of the
input change.
So every time we'll do something here and the inputs actually will update the global stay in our app
context as well.