1
00:00:00,210 --> 00:00:07,560
Beautiful job, and I'm next, I would want to work on the company's filter, and that one is going

2
00:00:07,560 --> 00:00:16,440
to be extremely similar to our sort one, because if you remember in a sort we use select and we hardcoded

3
00:00:16,440 --> 00:00:17,010
those values.

4
00:00:17,010 --> 00:00:23,450
So the difference is going to be in this case, that, of course, will iterate over our companies and

5
00:00:23,450 --> 00:00:27,150
then just display these options dynamically.

6
00:00:27,750 --> 00:00:31,350
But everything else is going to be exactly the same.

7
00:00:31,620 --> 00:00:37,350
Meaning, of course, there's going to be different function of the filters, but the idea is exactly

8
00:00:37,350 --> 00:00:37,710
the same.

9
00:00:37,710 --> 00:00:42,300
Where we have select, there's going to be name that is going to be a class name and all that.

10
00:00:42,690 --> 00:00:47,030
The difference is that data will be added dynamically.

11
00:00:47,430 --> 00:00:53,570
So I'll close the sort and then in the filters are one to navigate to the end of categories.

12
00:00:53,580 --> 00:01:00,030
Let's set up our comments and say companies and I love companies.

13
00:01:00,890 --> 00:01:10,750
And of companies and then let's go with our Dave, the class A form, control and line I there.

14
00:01:10,790 --> 00:01:12,200
Let's go with Harring five.

15
00:01:13,150 --> 00:01:22,480
Company, company, and let's set up our select select over here, and then for Select, we need a name

16
00:01:22,480 --> 00:01:26,740
which again needs to match to our filter state value.

17
00:01:27,130 --> 00:01:28,440
And Mike, is that his company?

18
00:01:28,450 --> 00:01:35,290
And I know that I keep on repeating this every time, but it is extremely important if this name will

19
00:01:35,290 --> 00:01:37,810
match to whatever you have in the state.

20
00:01:38,150 --> 00:01:44,470
And of course, when you're set up the update filters, of course, nothing is going to happen because

21
00:01:44,470 --> 00:01:46,840
this is how we set it up dynamically.

22
00:01:47,080 --> 00:01:51,860
And of course, we access that because it is in the name brand.

23
00:01:51,910 --> 00:01:54,660
Furedi actually don't need anything here.

24
00:01:54,910 --> 00:02:00,820
And then since I would want this to be a controlled input, I'm going to go with value is equal to a

25
00:02:00,820 --> 00:02:08,290
company so much that value and also right away on change is equal to my update filters.

26
00:02:08,600 --> 00:02:15,020
And then lastly, I would want to add a little bit of styling, so say here company class as well.

27
00:02:15,400 --> 00:02:22,330
Now, instead of the select, this is where we would want to iterate over companies, companies, and

28
00:02:22,330 --> 00:02:24,040
then we're going with a method.

29
00:02:24,040 --> 00:02:28,280
And then as far as the return, we're going to go with a option.

30
00:02:28,570 --> 00:02:34,210
Now, again, in order to make the shorter, I'm just going to say C, which means that every item will

31
00:02:34,210 --> 00:02:40,780
be represented as a C, and I'm just going to go with a return and an option.

32
00:02:41,230 --> 00:02:44,490
So we're returning option element then for the key.

33
00:02:44,500 --> 00:02:52,900
I'll use my index and then for a value I'll use the C so the company and then inside of this option

34
00:02:53,110 --> 00:02:56,100
I would also want to display my company.

35
00:02:56,260 --> 00:03:04,300
So whatever value I have here, that's why we have select, we have all the companies and we don't actually

36
00:03:04,300 --> 00:03:07,020
have to change anything in the filters here.

37
00:03:07,420 --> 00:03:12,080
So this is going to be exactly the same like we had with a input.

38
00:03:12,250 --> 00:03:16,180
So now if I get the bigger screen, I open up again my components.

39
00:03:17,070 --> 00:03:25,660
I have my filters noticed by default, company is equal to all, but as I change my select value notice

40
00:03:25,800 --> 00:03:29,810
the value also changes in the state that should do it.

41
00:03:30,180 --> 00:03:33,870
Now, of course, we can proceed and display our colors.