1
00:00:01,100 --> 00:00:04,890
In the section we're going to continue working on our search bar component.

2
00:00:04,940 --> 00:00:09,770
First things first however we're going to make sure that we hook up the semantic UI CSSA library to

3
00:00:09,770 --> 00:00:10,590
our project.

4
00:00:10,760 --> 00:00:15,410
So we're gonna go through the same series of steps that we've gone through many times so far inside

5
00:00:15,410 --> 00:00:16,450
of our public directory.

6
00:00:16,460 --> 00:00:19,060
We can find that index H.T. mail file.

7
00:00:19,160 --> 00:00:23,710
We're going to add a link tag to this thing that links to the semantic UI CSSA file.

8
00:00:23,790 --> 00:00:25,770
First we need to find a link to it.

9
00:00:25,970 --> 00:00:35,870
So inside of a new browser tab I can search for semantic UI Cdn a find CDN GST come and then once year

10
00:00:35,870 --> 00:00:43,740
we can search for semantic men and I'll find downhere semantic dustmen CSX.

11
00:00:43,810 --> 00:00:52,160
I can then copy that link flip back over out a new link tag with the rule of style sheets and I'll put

12
00:00:52,160 --> 00:00:59,180
in my draft like so enclose that tag off.

13
00:00:59,180 --> 00:01:03,590
Now if I flip back over I'll see that new font kick in indicating that I did just successfully load

14
00:01:03,590 --> 00:01:05,400
up that stylesheets.

15
00:01:05,420 --> 00:01:10,450
All right so now we can flip back over to our search bar component inside this video.

16
00:01:10,450 --> 00:01:14,950
We're going to start to focus on making sure that this thing at least shows a form element and maybe

17
00:01:15,010 --> 00:01:17,920
a label in a text input.

18
00:01:17,950 --> 00:01:23,120
I'm going to first be and by expanding this things render method so I can put in a set of parentheses

19
00:01:23,120 --> 00:01:29,130
like so I'll place my div and I'm going to give this thing a class name.

20
00:01:30,310 --> 00:01:36,580
Of UI segment renumbered this is just going to draw a kind of a nice rectangle around everything inside

21
00:01:36,580 --> 00:01:37,220
of your.

22
00:01:37,450 --> 00:01:41,670
And then this component is also going to eventually need a little bit of custom styling.

23
00:01:41,770 --> 00:01:47,110
So I'm going to also give it a class name of search bar like so so we can eventually come back inside

24
00:01:47,110 --> 00:01:47,590
if you're in.

25
00:01:47,590 --> 00:01:51,510
Add a little bit of custom styling that I know that it's going to need.

26
00:01:51,720 --> 00:01:52,690
Then inside of.

27
00:01:52,770 --> 00:01:56,670
I'll put a form element with a class name of UI form

28
00:01:59,600 --> 00:02:00,470
inside of there.

29
00:02:00,530 --> 00:02:03,230
I'll place a diff with the class name of field

30
00:02:06,380 --> 00:02:13,520
and then I'll place my label this time I'm going to give it a label of video search because that's what

31
00:02:13,520 --> 00:02:17,860
we're searching for at this time or searching for some YouTube videos or whatnot.

32
00:02:18,290 --> 00:02:26,520
Then after the label we can put a inputs I'm going to mark this as type text and we'll save this and

33
00:02:26,520 --> 00:02:31,790
just make sure that everything shows up correctly and is at least somewhat nicely styled so I'll flip

34
00:02:31,790 --> 00:02:32,450
back over.

35
00:02:32,540 --> 00:02:34,790
Now of course I'm very far zoomed in.

36
00:02:34,790 --> 00:02:36,990
If I go back out 200 percent I see.

37
00:02:37,070 --> 00:02:41,110
Looks like we got our nice text and put up here and I can type in it as usual.

38
00:02:41,120 --> 00:02:44,380
Now I'll set the search bar extends all the way from the left to the right.

39
00:02:44,420 --> 00:02:48,710
And usually we like to have a little bit of a gutter or kind of a margin on the left and right hand

40
00:02:48,710 --> 00:02:50,210
sides of the page.

41
00:02:50,210 --> 00:02:55,800
So to add in that little gutter of sorts I'm going to flip back over to my app component.

42
00:02:56,120 --> 00:03:04,410
I'm going to find that root level div inside there and I can put on a class name of UI container.

43
00:03:04,570 --> 00:03:08,950
And now if I go back over you'll see that the container just puts on a little margin on the left and

44
00:03:08,950 --> 00:03:11,180
right hand sides.

45
00:03:11,200 --> 00:03:11,470
All right.

46
00:03:11,500 --> 00:03:12,520
That's cool.

47
00:03:13,120 --> 00:03:14,630
Now go back over to my search bar.

48
00:03:14,710 --> 00:03:20,350
So the next thing I want to do is turn this input right here from a uncontrolled input to a controlled

49
00:03:20,380 --> 00:03:21,280
input.

50
00:03:21,320 --> 00:03:27,040
Remember the idea behind this in effect is that we're going to hook it up to the state of our search

51
00:03:27,040 --> 00:03:28,130
bar class.

52
00:03:28,240 --> 00:03:32,320
In practice the reason that we are doing this is so that we can make sure that we are storing our data

53
00:03:32,740 --> 00:03:36,810
for the search term inside of the component and not inside the door.

54
00:03:37,650 --> 00:03:44,490
So to get started our first initialize the state object at the top of my class I.S. term is empty string

55
00:03:44,490 --> 00:03:50,960
like So remember we can use any name for this property that we wish.

56
00:03:50,960 --> 00:03:56,930
Term is short for search term but it could just as easily been like text or my input or whatever you

57
00:03:56,930 --> 00:03:59,130
want it to be.

58
00:03:59,130 --> 00:04:04,710
So then on the input itself we're going to tell the input that its value is going to come from this

59
00:04:04,950 --> 00:04:06,180
state term.

60
00:04:07,870 --> 00:04:09,760
Now something that I want to show you very quickly.

61
00:04:09,760 --> 00:04:14,610
That's just a little bit fun that I didn't show you on the last application we put together.

62
00:04:14,830 --> 00:04:17,980
We have not yet wired up a event handler to the input.

63
00:04:18,010 --> 00:04:22,630
We've only told that hey here's what your value should be there really quickly I want to try putting

64
00:04:22,630 --> 00:04:30,140
in some default text appear at the state initialization and then after you do so flip back over and

65
00:04:30,140 --> 00:04:35,540
you'll see of course that default text appear inside of that text input right there.

66
00:04:35,540 --> 00:04:39,680
He also knows that there's a big warning down there just ignore that warning for just a second.

67
00:04:39,720 --> 00:04:41,210
So here's the interesting thing.

68
00:04:41,240 --> 00:04:46,400
Select inside this text input and then try typing and you'll see that you can't type at all.

69
00:04:46,640 --> 00:04:53,330
So that's the impactor and the output of assigning a value to an input element but not wiring up a on

70
00:04:53,330 --> 00:04:54,950
Change event handler.

71
00:04:54,950 --> 00:04:59,540
If you do not allow the input to change by allowing it to tell us that some user has typed in a new

72
00:04:59,540 --> 00:05:04,910
input update our state and get the input to render its input value right here is going to be completely

73
00:05:04,910 --> 00:05:07,570
fixed and there's no way that we can change it.

74
00:05:08,090 --> 00:05:12,360
If you actually look at the warning down there inside of your chrome console or browser council you

75
00:05:12,470 --> 00:05:18,220
notice that it actually specifically says that we wired up a value property but not a on change handler.

76
00:05:18,380 --> 00:05:22,800
And so that's going to show that text input as read only mode.

77
00:05:22,820 --> 00:05:25,310
So just interesting little thing.

78
00:05:25,310 --> 00:05:31,100
All right let's go ahead and wire up our onchange event handler all first begin by giving myself a little

79
00:05:31,100 --> 00:05:33,180
bit more space on the input tag.

80
00:05:34,470 --> 00:05:40,500
And then I'll add on an on change prop remember the name on change gear is very special.

81
00:05:40,560 --> 00:05:46,830
If we pass a callback handler to the onchange prop right here it's going to be called any time that

82
00:05:46,830 --> 00:05:48,340
the input gets changed.

83
00:05:48,510 --> 00:05:57,030
If we name this anything else like tell me when changed our callback function will not be invoked because

84
00:05:57,030 --> 00:06:01,520
the on change handler is a very special name right.

85
00:06:01,520 --> 00:06:06,730
So I'm going to pass this thing a callback method that we're going to eventually create as a callback

86
00:06:06,740 --> 00:06:14,620
on the search bar class that call about this dot on input change.

87
00:06:14,840 --> 00:06:18,700
And then I can immediately define that as a method on the class.

88
00:06:18,740 --> 00:06:20,630
So I'll say on and put chains

89
00:06:24,200 --> 00:06:28,940
and I know that this is going to be a event called X so I'm going to make sure I defined it as an arrow

90
00:06:28,940 --> 00:06:29,880
function like so.

91
00:06:30,690 --> 00:06:32,030
All right let's take a quick pause right here.

92
00:06:32,070 --> 00:06:33,100
When I come back the next section.

93
00:06:33,180 --> 00:06:34,890
Well make sure that we make use of this event.