1
00:00:00,210 --> 00:00:00,600
Beautiful.

2
00:00:00,990 --> 00:00:07,590
And once we have the general structure in place now, let's get moving and set up those select ones.

3
00:00:07,980 --> 00:00:14,490
And first, like I said, will heart code one inside of the Ajob and then we'll set up a separate component.

4
00:00:14,940 --> 00:00:21,150
So we simply want to take a look at it in the solution, and then we'll put two and two together where

5
00:00:21,390 --> 00:00:27,450
it's going to be a select form combined, essentially just like we have with forming both.

6
00:00:27,940 --> 00:00:29,420
Now how do we set it up?

7
00:00:29,430 --> 00:00:31,200
We go with Dev, with hormone.

8
00:00:31,560 --> 00:00:32,729
So that's going to be the styling.

9
00:00:33,060 --> 00:00:36,780
Then we want to go with label, which essentially is going to be for the job type.

10
00:00:36,780 --> 00:00:40,530
Therefore the optimal forest for job type, class name again.

11
00:00:40,800 --> 00:00:44,040
Global styles form label and then we pass in the name.

12
00:00:45,170 --> 00:00:50,000
After that, when it comes to select, I mean, pretty much everything is the same.

13
00:00:50,390 --> 00:00:55,580
We go with name chicken needs to match state value to the.

14
00:00:56,480 --> 00:00:57,200
Exactly.

15
00:00:57,590 --> 00:00:59,570
And we also want to go with value.

16
00:00:59,840 --> 00:01:03,110
So how is going to be the actual property value on change?

17
00:01:03,410 --> 00:01:04,040
Same deal.

18
00:01:04,370 --> 00:01:06,040
How job input.

19
00:01:06,320 --> 00:01:12,350
Again, we'll take a look at the event and more specifically, name and value and a little bit of styling.

20
00:01:12,350 --> 00:01:14,210
So go with form select.

21
00:01:14,420 --> 00:01:19,190
Now, when it comes to select, remember essentially is just a bunch of options.

22
00:01:20,330 --> 00:01:25,400
And also, remember that we have those options already in the array in the state.

23
00:01:25,970 --> 00:01:30,350
So here's what we want to do inside of these select I want to grab my array.

24
00:01:30,500 --> 00:01:36,890
I want to reiterate over and I'll have access to two things have access to the actual string value,

25
00:01:36,920 --> 00:01:41,510
which in my case, I'm going to call items since we will move it to a separate component as well as

26
00:01:41,510 --> 00:01:41,890
the index.

27
00:01:41,900 --> 00:01:42,150
Why?

28
00:01:42,160 --> 00:01:43,490
Well, because we have a list there.

29
00:01:43,880 --> 00:01:49,910
So in React, we need to add the key prop and pass in the unique value, which in our case is going

30
00:01:49,910 --> 00:01:50,660
to be the index.

31
00:01:51,080 --> 00:01:58,430
And then as far as the value for the option, for the option element over here, well, we'll use the

32
00:01:58,430 --> 00:01:59,060
string value.

33
00:01:59,540 --> 00:02:03,800
And as far as the text inside, I will also be destroyed.

34
00:02:04,100 --> 00:02:11,120
And again, just to reiterate, what string value am I talking about my go to context and context more

35
00:02:11,120 --> 00:02:11,840
precisely.

36
00:02:12,170 --> 00:02:18,590
And then we're talking about these two sectors over here job type options and status options versus

37
00:02:18,590 --> 00:02:22,670
where we have the list and therefore we are setting up that select component.

38
00:02:23,000 --> 00:02:30,530
So let's go to the ad and jump and where I have the job type for time being said, we will hot code

39
00:02:30,530 --> 00:02:30,950
everything.

40
00:02:30,960 --> 00:02:37,790
So I'm going to say with former all that's the styling and right away label HDMI for this case is going

41
00:02:37,790 --> 00:02:38,480
to be job type.

42
00:02:38,480 --> 00:02:46,850
Eventually, it's going to be equal to a prop class name equals to what form label here and line inside

43
00:02:46,850 --> 00:02:49,520
of the label and just go with job and type.

44
00:02:50,550 --> 00:02:57,700
Then right below it, we're going to go with our select Senate section, select and then as far as the

45
00:02:57,700 --> 00:03:00,500
name, well, that won't be equal to a job type on.

46
00:03:00,750 --> 00:03:03,930
Not going to repeat why it's so important to have the same name.

47
00:03:03,940 --> 00:03:05,770
Hopefully that is clear.

48
00:03:06,070 --> 00:03:10,780
Then we also want to go with value pretty much the same like we have for input.

49
00:03:11,030 --> 00:03:16,150
And let's go here what job type and we also want to go with on change.

50
00:03:16,190 --> 00:03:17,890
So at the moment, it's going to be any change.

51
00:03:18,250 --> 00:03:25,300
Eventually, it's going to be exactly like our form input and that one will be equal to handle job input.

52
00:03:25,600 --> 00:03:31,930
And then lastly, I want to add a little bit of styling and we're going to go with form and select.

53
00:03:32,470 --> 00:03:33,820
Let's take a look what we have.

54
00:03:34,240 --> 00:03:38,890
I mean, yes, I know we still need to iterate over our list, but let's just take a look.

55
00:03:39,400 --> 00:03:41,290
And here I do have the job right now.

56
00:03:41,590 --> 00:03:43,360
As you can see, I have nothing inside.

57
00:03:43,900 --> 00:03:51,850
And as far as the inside content, well, this is where I'll grab my job type options, Myra iterate

58
00:03:51,850 --> 00:03:52,390
over.

59
00:03:52,600 --> 00:03:59,140
We know that we can access the item, and I'm just going to call this item value here pretty generic.

60
00:03:59,570 --> 00:04:02,010
And then we're going to be looking for index.

61
00:04:02,590 --> 00:04:07,330
And also, as far as the return, well, this is where we'll go with option.

62
00:04:07,720 --> 00:04:09,520
So are option element.

63
00:04:09,850 --> 00:04:11,020
And then let's add a key.

64
00:04:12,100 --> 00:04:18,459
A Senate equal to an index, not as far as the value will go with item and not value, and when it comes

65
00:04:18,459 --> 00:04:23,080
to text Sam, the item and value lets service.

66
00:04:23,260 --> 00:04:28,990
And if everything is correct and this is what you should see, you should see full time because that's

67
00:04:28,990 --> 00:04:30,640
the default value in the state.

68
00:04:31,120 --> 00:04:33,640
And then we have the rest of the options.

69
00:04:34,030 --> 00:04:37,000
And if that's the case, we're done with a basic setup.

70
00:04:37,510 --> 00:04:41,380
And in next video, we'll move it into a separate component.

71
00:04:41,650 --> 00:04:46,660
And the other one are the job status, I believe one as well.