1
00:00:01,170 --> 00:00:06,000
We're now going to start to implement the text input that the user is going to type a search term into.

2
00:00:06,450 --> 00:00:10,260
And one thing I want to mention here is that we go back to original mockup right here.

3
00:00:10,530 --> 00:00:15,000
You'll notice that we only have a text input and there's no button next to it to submit this search

4
00:00:15,000 --> 00:00:16,470
term or anything like that.

5
00:00:17,080 --> 00:00:22,680
So the overall goal here is to make sure that every single time a user type something in another character,

6
00:00:23,070 --> 00:00:26,640
every single key press, we're going to do another search of the API.

7
00:00:27,270 --> 00:00:30,840
That's going to be a little bit inefficient to search the API so often.

8
00:00:31,020 --> 00:00:36,090
But we will take a look at how to add in some code to kind of restrict or throttle the number of searches

9
00:00:36,090 --> 00:00:36,600
that we make.

10
00:00:36,990 --> 00:00:38,430
But we'll worry about that a little bit later.

11
00:00:38,580 --> 00:00:43,470
Right now, all I want to do is mentioned that there is no separate submit button or anything like that.

12
00:00:44,400 --> 00:00:45,810
Let's create this text input.

13
00:00:46,680 --> 00:00:50,670
We're going to first begin by writing out a little G.S. X block inside of our search component.

14
00:00:51,210 --> 00:00:52,350
I'm going to delete the H1.

15
00:00:53,240 --> 00:00:55,940
I going to put in a set of parentheses and return a bullet.

16
00:00:55,970 --> 00:00:58,670
Big day ASX block offers.

17
00:00:58,700 --> 00:00:59,890
Begin with creating a div.

18
00:01:00,350 --> 00:01:02,500
And we're going to add in a couple other elements.

19
00:01:02,690 --> 00:01:05,180
With a couple of class names, just two applies in styling.

20
00:01:06,370 --> 00:01:07,000
So here we go.

21
00:01:07,570 --> 00:01:12,040
I got to put in a div with the class name of UI form and close it off.

22
00:01:13,170 --> 00:01:15,780
I'll put in a div with the class name of field.

23
00:01:16,740 --> 00:01:17,490
And close it off.

24
00:01:18,700 --> 00:01:20,040
Well, then put in a label.

25
00:01:22,400 --> 00:01:25,100
With the text enter search term.

26
00:01:26,740 --> 00:01:31,910
And then after that, in input with the class name of input and close that tag.

27
00:01:36,240 --> 00:01:39,210
Let's go back over to our browser and see what that looks like.

28
00:01:39,800 --> 00:01:39,940
OK.

29
00:01:40,380 --> 00:01:41,730
So we should have something like this right here.

30
00:01:41,790 --> 00:01:46,470
Nice looking label and a text input that for right now spans the entire with the screen.

31
00:01:49,980 --> 00:01:51,210
Well, we got a text input.

32
00:01:51,590 --> 00:01:54,360
Now, remember, we are using hooks here to track our state.

33
00:01:54,750 --> 00:01:57,540
We're not making use of Class-Based components or anything like that.

34
00:01:58,080 --> 00:02:04,500
Nonetheless, we still use the exact same approach for managing typing into an input as we did with

35
00:02:04,500 --> 00:02:05,820
class based components.

36
00:02:06,360 --> 00:02:09,870
That means that we are still going to assign a value prop to this input.

37
00:02:10,380 --> 00:02:15,760
We are still going to assign an unchanged event handler any time the value inside that input has changed.

38
00:02:15,780 --> 00:02:17,910
We are going to update our heads of state.

39
00:02:18,030 --> 00:02:22,200
That's going to keep track of the value, that input that is going to cause our component to re render.

40
00:02:22,620 --> 00:02:25,680
And we will see the new value inside the input up here on the screen.

41
00:02:26,340 --> 00:02:30,960
We're still doing all the same management of a text input, even though we are using Hooke's.

42
00:02:32,590 --> 00:02:37,390
So we need to create a piece of state that's going to keep track of the value type inside there do so,

43
00:02:37,420 --> 00:02:40,540
we will make use of the you state hook and to do so.

44
00:02:40,700 --> 00:02:43,760
Well, we need to import you state from react at the very top.

45
00:02:45,650 --> 00:02:46,760
I will import you state.

46
00:02:47,900 --> 00:02:51,050
Then at the top of my search component, I'm going to create a new piece of state.

47
00:02:51,650 --> 00:02:57,110
I think a reasonable name for the state would be simply term similar to what we did back on our YouTube

48
00:02:57,170 --> 00:02:57,830
application.

49
00:02:59,020 --> 00:03:00,580
We'll get term, inset term.

50
00:03:01,540 --> 00:03:04,150
And I'll provide a default value of an empty string.

51
00:03:05,380 --> 00:03:11,230
We'll then wire up a term and set term to the value prop and the unchanged prop of the input element

52
00:03:11,230 --> 00:03:11,680
right here.

53
00:03:12,650 --> 00:03:15,160
I to first begin by giving myself a little space.

54
00:03:17,320 --> 00:03:19,720
Well, then set the value as being term.

55
00:03:20,630 --> 00:03:26,430
And then on change will be event, which are going to abbreviate simply as E right now.

56
00:03:27,730 --> 00:03:33,640
And we'll call set term and provide the new value for the term, which will be e get value.

57
00:03:34,860 --> 00:03:35,660
I can't say it enough.

58
00:03:35,810 --> 00:03:38,690
All the same mechanics apply around managing and input.

59
00:03:38,990 --> 00:03:42,110
Even though we are using a you state hook instead of a class component.

60
00:03:44,440 --> 00:03:45,160
Let's save this.

61
00:03:45,820 --> 00:03:50,050
Look back over the browser and I just want to make sure that I can type something inside of here and

62
00:03:50,110 --> 00:03:52,120
every everything still work as expected.

63
00:03:53,120 --> 00:03:56,980
Yep, I can type in there just fine, and I don't see any errors inside my console.

64
00:03:57,430 --> 00:04:00,370
I do see a couple of warnings right now, but those warnings are totally fine.

65
00:04:00,670 --> 00:04:01,660
I just don't see any errors.

66
00:04:01,690 --> 00:04:02,980
That's what I really care about for now.

67
00:04:04,150 --> 00:04:09,640
OK, so we've got some text input now that we can detect a user typing inside that input and we know

68
00:04:09,640 --> 00:04:10,480
what they're typing.

69
00:04:10,780 --> 00:04:16,960
We now need to make sure that we do a search of the API with every request that is issued for that,

70
00:04:17,010 --> 00:04:19,210
that we really have two options available to us.

71
00:04:19,650 --> 00:04:24,280
And when we are going to issue that request, let's take a pause right here and then figure out and

72
00:04:24,280 --> 00:04:26,200
discuss what the two options are.

73
00:04:26,260 --> 00:04:27,610
Do we ever making this request?