1
00:00:00,210 --> 00:00:06,210
All right, and once we have looked at how we can hard code our select one inside of the ad.

2
00:00:06,810 --> 00:00:13,140
Well, let's create a component just in case we ever need to rehearse it that way again.

3
00:00:13,500 --> 00:00:18,690
Every time we'll need it in our application, we're going to simply grab our component just like we're

4
00:00:18,690 --> 00:00:20,310
doing with our format.

5
00:00:20,970 --> 00:00:28,500
And then just set it up in the page or I don't know any other component in a matter of seconds.

6
00:00:28,920 --> 00:00:30,180
And first, here's what I want to do.

7
00:00:30,690 --> 00:00:34,650
I want to create a form row, select in the components.

8
00:00:35,160 --> 00:00:36,270
So let's start with that.

9
00:00:36,270 --> 00:00:41,100
So form row and select address.

10
00:00:41,580 --> 00:00:42,900
Let's create that component.

11
00:00:43,830 --> 00:00:45,480
I'm going to go with our function in this case.

12
00:00:46,510 --> 00:00:50,140
Let's say it, once right away, shut up all the imports and exports.

13
00:00:50,650 --> 00:00:52,090
So say here, select.

14
00:00:52,920 --> 00:00:53,670
Select stuff.

15
00:00:54,890 --> 00:01:01,370
Let's say that one and then we want to go to index, we want to go off course with our form rule and

16
00:01:01,370 --> 00:01:04,730
then select former and select import that.

17
00:01:05,180 --> 00:01:08,120
And then let's also right or set it up over here.

18
00:01:08,160 --> 00:01:14,240
So I mean, I'm going to places right after the sidebar because I'm annoying that I worry, but you

19
00:01:14,240 --> 00:01:17,300
don't have to worry so long as it's in the object.

20
00:01:17,810 --> 00:01:22,340
Then let's navigate through the ad job and right after lifeform form wrong.

21
00:01:22,340 --> 00:01:27,830
Let's go with our former select and let's add a comma so we don't have any bugs.

22
00:01:27,870 --> 00:01:28,970
Let's keep on scrolling.

23
00:01:29,330 --> 00:01:35,120
And instead of this job type over here, we're going to grab this, hold their mark.

24
00:01:35,150 --> 00:01:37,310
So and we'll just cut it out.

25
00:01:37,310 --> 00:01:39,410
So I cut this one out.

26
00:01:39,990 --> 00:01:40,910
OK, good.

27
00:01:41,360 --> 00:01:45,140
And then let's go to the form row select.

28
00:01:45,560 --> 00:01:50,240
And I was thinking, I'm going to render it, but I guess it's not going to be the case.

29
00:01:50,300 --> 00:01:51,620
Let me just copy and paste.

30
00:01:52,040 --> 00:01:54,050
And now it's again discuss.

31
00:01:55,210 --> 00:01:58,240
What do we want to set up as far as the props?

32
00:01:58,580 --> 00:02:01,540
So let's say and then let's go line by line.

33
00:02:02,140 --> 00:02:08,860
I definitely want to display here the name as far as the label, because that will match to whatever

34
00:02:08,860 --> 00:02:09,820
I have over here.

35
00:02:10,150 --> 00:02:14,890
But again, there might be a case where my name is dropped out, so it wouldn't make more sense if,

36
00:02:14,890 --> 00:02:18,040
again, we set up that label text and I think it does.

37
00:02:18,040 --> 00:02:23,560
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

38
00:02:23,560 --> 00:02:30,490
with my label text or the name, which is another prop that we will pass in to see if the label text

39
00:02:30,490 --> 00:02:31,000
exists.

40
00:02:31,060 --> 00:02:31,510
Awesome.

41
00:02:31,810 --> 00:02:32,590
We use that one.

42
00:02:32,600 --> 00:02:34,270
If not, we'll use the name.

43
00:02:34,930 --> 00:02:39,640
Now, when it comes to Animal four, you know it's not going to be any more hardcoded chopped up, correct?

44
00:02:39,940 --> 00:02:44,170
Now have a name because you have multiple select inputs.

45
00:02:45,040 --> 00:02:46,390
Then let's keep on moving.

46
00:02:46,750 --> 00:02:48,010
What else we want to set up over here?

47
00:02:48,040 --> 00:02:52,330
Well, again, we have the name what is not going to be equal to to the name?

48
00:02:52,460 --> 00:02:55,410
OK, and now we come to the value.

49
00:02:55,720 --> 00:02:58,720
So right after that name will also look for the value.

50
00:02:59,200 --> 00:03:03,840
So instead of job type, we'll go with value than we have on change.

51
00:03:03,850 --> 00:03:05,790
What is not going to be equal to men?

52
00:03:05,840 --> 00:03:10,090
Let's set up the same function, say I know and then change.

53
00:03:10,570 --> 00:03:16,570
Now, instead of handling job input, which is going to be only in the add job, we'll go with handle

54
00:03:16,570 --> 00:03:19,000
change, which we can pass in from any component.

55
00:03:19,440 --> 00:03:21,250
And then let's keep on scrolling.

56
00:03:21,670 --> 00:03:24,160
And now we have these job type options.

57
00:03:24,310 --> 00:03:25,480
Now what is that going to be?

58
00:03:25,720 --> 00:03:26,670
That's going to be a list.

59
00:03:26,680 --> 00:03:30,130
So each and every time we can pass in some kind of array of items.

60
00:03:30,580 --> 00:03:35,650
And yes, I mean, in this case, it does assume the fact that it's going to be strength.

61
00:03:36,310 --> 00:03:41,140
So if it's going to be an object, either you have to set up a different component or stuff along those

62
00:03:41,140 --> 00:03:41,380
lines.

63
00:03:41,410 --> 00:03:45,610
So again, if you are reusing that in your own project, just remember that one.

64
00:03:46,030 --> 00:03:47,590
And let's go here with list.

65
00:03:48,070 --> 00:03:50,890
I will keep the item value and index the same.

66
00:03:51,460 --> 00:03:54,070
I just don't think there's any need to change that one.

67
00:03:54,400 --> 00:03:56,110
So let's save it right now.

68
00:03:56,380 --> 00:04:01,000
Let's go back to add job, and here we'll have two of them.

69
00:04:01,450 --> 00:04:05,320
We'll have one for status and then one for the job type.

70
00:04:06,160 --> 00:04:08,380
Now the order is really up to you.

71
00:04:08,770 --> 00:04:11,080
Let me just double check thing in here.

72
00:04:11,080 --> 00:04:15,400
I have the status first and then the job type, so I'll keep it the same, I guess.

73
00:04:15,400 --> 00:04:18,730
So I messed that up a little bit where I'm going to go with job status.

74
00:04:18,730 --> 00:04:25,330
Now I'm looking for form or select when we want to go with the name just going to be equal to this status

75
00:04:25,330 --> 00:04:25,600
one.

76
00:04:26,620 --> 00:04:31,510
After that, we want to provide some kind of value, which is going to be equal to a start.

77
00:04:31,930 --> 00:04:39,580
And then we also have handled change that is equal to what to the panel job and input.

78
00:04:40,000 --> 00:04:40,990
That's the function name.

79
00:04:41,380 --> 00:04:45,010
And then we also have a list, perhaps what we're providing.

80
00:04:45,280 --> 00:04:49,560
And in here, as far as the list, I'm going to go with status and line options.

81
00:04:49,570 --> 00:04:55,480
So status options, I provide my array that should do it for job status.

82
00:04:55,840 --> 00:05:02,140
Now I can simply take this one copy and paste, and we just need to change some powers around where

83
00:05:02,470 --> 00:05:03,820
this is not going to be status.

84
00:05:04,150 --> 00:05:11,350
We're looking for the job and type, then I do want to add the label text.

85
00:05:11,710 --> 00:05:17,590
So in this case, I'm going to go with just type label text and set up the type here.

86
00:05:17,860 --> 00:05:20,230
Or, I mean, if you want, you can write here, drop that.

87
00:05:20,230 --> 00:05:23,170
But I think I'm going to leave it as a type value.

88
00:05:23,180 --> 00:05:26,650
Well, that is going to be equal to my job type property.

89
00:05:26,650 --> 00:05:29,710
Coming from state handle job input doesn't change.

90
00:05:30,040 --> 00:05:31,000
The array does.

91
00:05:31,270 --> 00:05:35,950
So in this case, we'll go with job type and we're looking for options.

92
00:05:36,500 --> 00:05:40,510
And let's maybe out here, comment V10 container.

93
00:05:40,870 --> 00:05:44,980
And once we have this one in place, once we navigate back to the browser.

94
00:05:45,430 --> 00:05:46,440
Check it out.

95
00:05:46,450 --> 00:05:47,440
We have two of them.

96
00:05:47,440 --> 00:05:50,110
We have one, for starters, and one for job type.

97
00:05:50,320 --> 00:05:51,850
And you know what actually changed my mind?

98
00:05:52,000 --> 00:05:53,110
It's not going to be just type.

99
00:05:53,620 --> 00:05:55,270
I will go with job type.

100
00:05:55,690 --> 00:06:03,400
And once we have set up both select as a separate component and we're rendering it in at job.

101
00:06:03,820 --> 00:06:11,380
Now move on to the next step, which is going to be setting up a global function that handles of the

102
00:06:11,380 --> 00:06:12,040
input change.

103
00:06:12,490 --> 00:06:19,150
So every time we'll do something here and the inputs actually will update the global stay in our app

104
00:06:19,150 --> 00:06:20,410
context as well.