In the section we're going to continue working on our search bar component.
First things first however we're going to make sure that we hook up the semantic UI CSSA library to
our project.
So we're gonna go through the same series of steps that we've gone through many times so far inside
of our public directory.
We can find that index H.T. mail file.
We're going to add a link tag to this thing that links to the semantic UI CSSA file.
First we need to find a link to it.
So inside of a new browser tab I can search for semantic UI Cdn a find CDN GST come and then once year
we can search for semantic men and I'll find downhere semantic dustmen CSX.
I can then copy that link flip back over out a new link tag with the rule of style sheets and I'll put
in my draft like so enclose that tag off.
Now if I flip back over I'll see that new font kick in indicating that I did just successfully load
up that stylesheets.
All right so now we can flip back over to our search bar component inside this video.
We're going to start to focus on making sure that this thing at least shows a form element and maybe
a label in a text input.
I'm going to first be and by expanding this things render method so I can put in a set of parentheses
like so I'll place my div and I'm going to give this thing a class name.
Of UI segment renumbered this is just going to draw a kind of a nice rectangle around everything inside
of your.
And then this component is also going to eventually need a little bit of custom styling.
So I'm going to also give it a class name of search bar like so so we can eventually come back inside
if you're in.
Add a little bit of custom styling that I know that it's going to need.
Then inside of.
I'll put a form element with a class name of UI form
inside of there.
I'll place a diff with the class name of field
and then I'll place my label this time I'm going to give it a label of video search because that's what
we're searching for at this time or searching for some YouTube videos or whatnot.
Then after the label we can put a inputs I'm going to mark this as type text and we'll save this and
just make sure that everything shows up correctly and is at least somewhat nicely styled so I'll flip
back over.
Now of course I'm very far zoomed in.
If I go back out 200 percent I see.
Looks like we got our nice text and put up here and I can type in it as usual.
Now I'll set the search bar extends all the way from the left to the right.
And usually we like to have a little bit of a gutter or kind of a margin on the left and right hand
sides of the page.
So to add in that little gutter of sorts I'm going to flip back over to my app component.
I'm going to find that root level div inside there and I can put on a class name of UI container.
And now if I go back over you'll see that the container just puts on a little margin on the left and
right hand sides.
All right.
That's cool.
Now go back over to my search bar.
So the next thing I want to do is turn this input right here from a uncontrolled input to a controlled
input.
Remember the idea behind this in effect is that we're going to hook it up to the state of our search
bar class.
In practice the reason that we are doing this is so that we can make sure that we are storing our data
for the search term inside of the component and not inside the door.
So to get started our first initialize the state object at the top of my class I.S. term is empty string
like So remember we can use any name for this property that we wish.
Term is short for search term but it could just as easily been like text or my input or whatever you
want it to be.
So then on the input itself we're going to tell the input that its value is going to come from this
state term.
Now something that I want to show you very quickly.
That's just a little bit fun that I didn't show you on the last application we put together.
We have not yet wired up a event handler to the input.
We've only told that hey here's what your value should be there really quickly I want to try putting
in some default text appear at the state initialization and then after you do so flip back over and
you'll see of course that default text appear inside of that text input right there.
He also knows that there's a big warning down there just ignore that warning for just a second.
So here's the interesting thing.
Select inside this text input and then try typing and you'll see that you can't type at all.
So that's the impactor and the output of assigning a value to an input element but not wiring up a on
Change event handler.
If you do not allow the input to change by allowing it to tell us that some user has typed in a new
input update our state and get the input to render its input value right here is going to be completely
fixed and there's no way that we can change it.
If you actually look at the warning down there inside of your chrome console or browser council you
notice that it actually specifically says that we wired up a value property but not a on change handler.
And so that's going to show that text input as read only mode.
So just interesting little thing.
All right let's go ahead and wire up our onchange event handler all first begin by giving myself a little
bit more space on the input tag.
And then I'll add on an on change prop remember the name on change gear is very special.
If we pass a callback handler to the onchange prop right here it's going to be called any time that
the input gets changed.
If we name this anything else like tell me when changed our callback function will not be invoked because
the on change handler is a very special name right.
So I'm going to pass this thing a callback method that we're going to eventually create as a callback
on the search bar class that call about this dot on input change.
And then I can immediately define that as a method on the class.
So I'll say on and put chains
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
function like so.
All right let's take a quick pause right here.
When I come back the next section.
Well make sure that we make use of this event.