1
00:00:00,060 --> 00:00:07,770
Before I start working on the single cocktail page, I would want to set up my form or essentially as

2
00:00:07,950 --> 00:00:12,600
the user is typing, we are refactoring the cocktails.

3
00:00:13,140 --> 00:00:15,760
And in order to do that, of course, we need to navigate there.

4
00:00:16,080 --> 00:00:18,210
I'll start with my return.

5
00:00:18,210 --> 00:00:21,870
But like I already previously mentioned, we will spice things up.

6
00:00:22,260 --> 00:00:26,930
And instead of controlled input, I'm going to go with uncontrolled input.

7
00:00:27,390 --> 00:00:32,510
So you can probably already guess that, yes, we're going to use a use rough.

8
00:00:33,000 --> 00:00:40,140
So before we set up anything on the Gold Coast and online search and I'll call the search value is equal

9
00:00:40,140 --> 00:00:44,160
to react and then use rough, as you can see.

10
00:00:44,610 --> 00:00:51,330
If I don't want to, I don't have to import it can simply go with react and not use rough and by default

11
00:00:51,330 --> 00:00:53,070
it's just going to be empty string.

12
00:00:53,460 --> 00:00:59,940
And then before we set up use affect or functions and all that cool stuff, I just worry about our return.

13
00:01:01,140 --> 00:01:09,570
Where we go with S. It's going to have two classes here, can I have class of section and online search

14
00:01:09,990 --> 00:01:13,040
so online and search the section?

15
00:01:13,440 --> 00:01:19,440
I don't want to go with form with the class of search hyphen form for now.

16
00:01:19,450 --> 00:01:22,790
Eventually we will add on, submit and I'll show you why.

17
00:01:23,190 --> 00:01:31,830
So we our search for awesome online, we're going to go there with a class of form hyphen control and

18
00:01:32,070 --> 00:01:32,810
instead of this day.

19
00:01:32,880 --> 00:01:37,290
Let's go with label and I'm going to have the idea of a name.

20
00:01:37,800 --> 00:01:42,870
And as far as the text value, let's go search your favorite.

21
00:01:43,840 --> 00:01:46,030
And then cocktail, cocktail.

22
00:01:46,540 --> 00:01:47,780
OK, awesome.

23
00:01:48,070 --> 00:01:54,640
But it we should see something like this and then right after the label we're going to go with input.

24
00:01:54,950 --> 00:01:56,470
It's going to be a text.

25
00:01:56,800 --> 00:01:59,800
Let's add an idea and it should be name.

26
00:02:00,160 --> 00:02:03,040
And then, of course, I would also want to set up my user.

27
00:02:03,370 --> 00:02:09,320
So say Reath is equal to search and value.

28
00:02:09,970 --> 00:02:11,190
OK, awesome.

29
00:02:11,740 --> 00:02:13,230
And what's the plan now?

30
00:02:14,020 --> 00:02:22,510
Well, every time the user type something in input, I would want to invoke set search term, which

31
00:02:22,510 --> 00:02:26,410
in turn of course will invoke the user.

32
00:02:26,710 --> 00:02:27,160
Correct.

33
00:02:27,490 --> 00:02:34,660
Where will fetch drinks or of course the value now change since it's not going to be a it's going to

34
00:02:34,660 --> 00:02:36,880
be whatever we are typing.

35
00:02:37,180 --> 00:02:37,600
Correct.

36
00:02:37,930 --> 00:02:40,440
Because we have value of search term.

37
00:02:40,780 --> 00:02:47,800
So we have our set search term, which of course will change this value the search term, and then will

38
00:02:47,800 --> 00:02:51,400
perform a fetch and get those new values back.

39
00:02:51,880 --> 00:02:59,470
The cool thing is that we can still set up the on change and so here on change and I'll set it equal

40
00:02:59,470 --> 00:03:05,140
to some kind of function that I'm going to create and I'm going to call this search.

41
00:03:07,650 --> 00:03:12,980
OK, awesome, can save it now, of course, react complains because there's no such function, so we'll

42
00:03:12,990 --> 00:03:15,480
go const and then search.

43
00:03:16,460 --> 00:03:25,340
Cocktail, that is my function, and then how can we access this value when it comes to user or simply

44
00:03:25,340 --> 00:03:35,450
we go with our function so set search term and then we pass in the search value dot current and then

45
00:03:35,450 --> 00:03:38,750
the value, whatever is in the form.

46
00:03:39,230 --> 00:03:45,880
So now every time we all type something, of course we will get the new drinks.

47
00:03:46,340 --> 00:03:46,930
There it is.

48
00:03:47,030 --> 00:03:50,810
Now as I'm typing notice how we are getting drinks.

49
00:03:50,810 --> 00:03:57,800
And then eventually, of course, we hit the error because there is no cocktails that match that particular

50
00:03:57,980 --> 00:03:58,790
input value.

51
00:03:59,150 --> 00:04:05,330
So again, we go with something and we are getting our drinks, but then eventually if we start adding

52
00:04:05,330 --> 00:04:09,390
gibberish, we'll get no cocktails matched your search.

53
00:04:09,780 --> 00:04:11,480
Now we're almost done.

54
00:04:11,480 --> 00:04:13,430
But there's two things that I would want to add.

55
00:04:13,700 --> 00:04:21,020
First of all, I would want to set up my focus on the input, and I can do that simply by running react.

56
00:04:21,900 --> 00:04:28,530
And then use the fact is a fact, and as you can see here on purpose, I'm just showcasing that we don't

57
00:04:28,530 --> 00:04:35,700
always need to import our mind when I would want to call it when the component renders and I'm just

58
00:04:35,700 --> 00:04:42,660
going to go focus function again in order to access my input, I need to go with search value and then

59
00:04:42,660 --> 00:04:45,540
that and current, of course, and then focus.

60
00:04:45,990 --> 00:04:52,200
So once I run my focus, you'll notice that the moment I renders it will have the focus.

61
00:04:52,440 --> 00:04:52,880
Beautiful.

62
00:04:53,310 --> 00:04:59,490
And then lastly, you'll notice also something very interesting where even though we don't have the

63
00:04:59,490 --> 00:05:07,080
subnet, since we're not handling that, if the user just presses enter, notice how we are reloading

64
00:05:07,260 --> 00:05:10,680
the application and that is not the behavior that I would want.

65
00:05:11,070 --> 00:05:17,760
So instead, what we're going to set up is on subnet and we'll just make sure that we're preventing

66
00:05:17,760 --> 00:05:18,340
the default.

67
00:05:18,720 --> 00:05:25,140
So where we have the form, we're going to go on segment and then we'll have our handle segment.

68
00:05:25,350 --> 00:05:28,870
So handle and submit.

69
00:05:29,340 --> 00:05:30,220
OK, awesome.

70
00:05:30,480 --> 00:05:35,140
And then I would want to come up with function, so handle and submit.

71
00:05:35,460 --> 00:05:41,850
Now I do want the event object and then I would want to just go with it and then prevent.

72
00:05:42,360 --> 00:05:45,800
And of course the name of the function was prevent default.

73
00:05:46,410 --> 00:05:54,550
Now if the user is pressing, enter notice how we're not rushing our application, which is just awesome.

74
00:05:54,930 --> 00:06:01,800
Again, another flavor, how we can set up the input that is using the uncontrolled input where we use

75
00:06:01,800 --> 00:06:05,460
user F and then we have that current property.

76
00:06:05,820 --> 00:06:12,270
And then more specifically, we're looking for the value, since that is how we can access values in

77
00:06:12,270 --> 00:06:14,100
the input using JavaScript.

78
00:06:14,430 --> 00:06:17,790
So simply we can start typing our values here.

79
00:06:18,060 --> 00:06:22,710
And I think in this case, the out notice how we're getting back the cocktail's.

80
00:06:23,070 --> 00:06:28,920
So while we still have the cocktail's, of course we display them on screen and eventually we have no

81
00:06:28,920 --> 00:06:29,460
cocktail's.

82
00:06:29,670 --> 00:06:31,980
Match your search criteria.