1
00:00:00,300 --> 00:00:06,600
So now we have our androgynous about GSX, so now it's time to move into a search bar and add some code

2
00:00:06,600 --> 00:00:06,930
to it.

3
00:00:07,230 --> 00:00:08,580
So just move into a search bar.

4
00:00:11,140 --> 00:00:18,160
And we'll be importing React, which we already have done and inside do what they're going to do is

5
00:00:18,160 --> 00:00:19,420
that will create a section.

6
00:00:29,190 --> 00:00:36,330
Now this section is going to be holding another child component to inside the section will be having

7
00:00:36,330 --> 00:00:36,930
a fun.

8
00:00:38,380 --> 00:00:39,580
Because this is a search bar.

9
00:00:40,690 --> 00:00:47,320
So now let's just put up a phone in this and inside this one, we're going to have an input, which

10
00:00:47,320 --> 00:00:48,280
is our search searchable input.

11
00:00:48,970 --> 00:00:55,120
So instead, this input, let's give it a class name of maybe from control.

12
00:00:58,200 --> 00:01:03,060
And after that last name will also give it a placeholder place a little.

13
00:01:06,090 --> 00:01:06,780
Its characters.

14
00:01:12,300 --> 00:01:15,540
And not the case will also give it autofocus.

15
00:01:18,310 --> 00:01:23,440
And I thought of our guys will also give it a text type of text, which is by default, text only.

16
00:01:27,490 --> 00:01:31,360
And I will also give it a name, which is again going to be called to search.

17
00:01:36,450 --> 00:01:38,580
And after a lot to give it a value.

18
00:01:42,300 --> 00:01:43,350
Of empty string.

19
00:01:44,340 --> 00:01:48,390
And this is not going to be an institution or industry, we will be using you data back.

20
00:01:48,510 --> 00:01:50,960
But before we do that, let's just give it an empty string for now.

21
00:01:51,240 --> 00:01:55,410
And our own judgment, which is reconfiguring shortly.

22
00:01:57,330 --> 00:02:02,700
So when I left, seemingly with an empty string and after the change exited with an 80.

23
00:02:03,960 --> 00:02:05,680
Of search.

24
00:02:07,820 --> 00:02:09,470
Now we should close this.

25
00:02:11,200 --> 00:02:15,910
OK, so we have a phone inside the phone, we have a study, we have a death inside this, do we have

26
00:02:15,910 --> 00:02:18,130
this action and a phone and an input?

27
00:02:18,730 --> 00:02:22,240
Now let's just put it to work.

28
00:02:22,570 --> 00:02:27,540
OK, so it looks nice now it's time to add stake into our search bar.

29
00:02:27,580 --> 00:02:30,310
And since this is the fictional component, so guess what?

30
00:02:30,310 --> 00:02:33,460
We would be using hooks and again will be using the use state.

31
00:02:33,460 --> 00:02:33,700
OK?

32
00:02:36,550 --> 00:02:41,530
And Justin's idea of a functional component will be controlling stake for holding our text.

33
00:02:49,280 --> 00:02:56,840
And initially, we want us it takes to be equal to equal to use state and instead used, it will be

34
00:02:56,840 --> 00:03:01,320
putting up just an empty string because initially we won the value of X to be an industry.

35
00:03:01,700 --> 00:03:04,430
Now we'll be creating a function to handle this change.

36
00:03:04,910 --> 00:03:07,730
And let's just call it and change.

37
00:03:13,840 --> 00:03:16,060
And this is again going to be an error of function.

38
00:03:22,310 --> 00:03:29,490
Now what it is going to do, it is going to set the value set that should be equal to it or target or

39
00:03:29,510 --> 00:03:29,960
value.

40
00:03:32,600 --> 00:03:34,390
Now after this set out already.

41
00:03:36,680 --> 00:03:42,140
Which we are receiving from our abductees, so if we just take a look at our outrageous just.

42
00:03:43,010 --> 00:03:47,270
So we are passing it, said query as a parameter or as a prop.

43
00:03:47,450 --> 00:03:49,550
So let's just a structure that said query.

44
00:03:54,160 --> 00:03:56,620
So really, putting up after this set great equals two.

45
00:04:07,510 --> 00:04:11,920
It should be when you go to it or target, don't value.

46
00:04:14,740 --> 00:04:18,790
No, this is a text that we're putting up inside our value.

47
00:04:19,240 --> 00:04:25,990
So just move into your value, which we just put in as an empty string before and put it equal to text

48
00:04:26,170 --> 00:04:27,280
inside the codebases.

49
00:04:27,750 --> 00:04:33,430
Now this form needs to have an on summit property, so we'll just put it in on summit.

50
00:04:36,990 --> 00:04:40,960
This on an hour, this engineer is going to be able to handle change.

51
00:04:40,980 --> 00:04:43,290
So let's just put it as handle change.

52
00:04:47,210 --> 00:04:50,960
And hit save, so now we have even configured a search of our logistics.

53
00:04:51,380 --> 00:04:53,510
Now it's time to move into a catalyst.

54
00:04:54,260 --> 00:04:58,520
But before we do that, we need to have data in our application, right?

55
00:04:58,850 --> 00:05:01,250
That is the very reason that we are making this up.

56
00:05:01,640 --> 00:05:02,060
So for that?