In the last video we made some pretty good progress on our search bar component at the very end.
We wired up this onchange event handler that we had called on input change.
So remember this callback method right here is going to be called with an event object and we're going
to make sure that we take our value of the input out of that event object and assign it to a state property.
So I'll call inside of here.
This set states are going to update my term property with a value from event target value and then I'm
also going to make sure that I remove that kind of default string that I initialized my states object
with and return it to the default of empty string.
So now we should be able to flip back over and successfully type inside there.
Very good.
Now you might recall that on the last application when put together we actually wrote this on input
change event handler in line or as a inline function.
When we passed it off to onchange recall that that is a completely equivalent way of defining the onchange
handler.
Same thing as what we just did right here.
So if we wanted to we could have done something abbreviated like this.
Set state's term target value like so the summary and I figured we would just do things a little bit
differently just for the sake of fun.
All right so now that we've got our input text here working just fine.
We're going to make sure that we get a callback handler on our form as well so that we can watch for
any time that this form gets submitted.
So on the form element I'm going to add on a very specially named prop on submit any time that the user
submits the form we're going to call a callback method of this start on form submit and then right underneath
the existing event handler or out on a new method called on form.
MIT and I'll write out the same syntax we had for the previous one.
Remember I'm assigning this as an arrow function because this is a callback that I get a pass to some
child element and remember that discussion we had a while ago a very long discussion around the value
of this inside a callback.
All right so now inside of here we're going to make sure that the browser does not attempt to automatically
submit the form any time that the user actually submits it to prevent that we will call it event prevent
default and then after that we're going to make sure eventually that we try to call some callback function
cost into our search bar from the app component.
We don't have that just yet.
We're not passing any callback into the search bar.
So I'm not going to add anything inside of enformed submit just yet.
Instead right now I'll add in a little comment to myself I'll say to make sure we call call back from
parent component so that we can tell the app that the user just omitted the form and that they probably
want to attempt to initiate a new search of the YouTube API.
All right so let's flip back over really quickly.
I'm going to enter some text in here and if I hit enter I just expect to make sure that the page does
not entirely refresh remember that's the entire purpose of the event prove that default line right there.
If we don't have that line and we enter something in and hit Enter we will see the application refresh
which is not desired behavior.
So I to make sure I comment that OK.
So I think that we've got the search bar put together.
That was pretty quick.
And trust me the rest of the application is going to be pretty quick too.
Let's take a pause right here.
When we come back the next section we're going to start to set up the YouTube API so that we can actually
take that search term and make a request and get back a list of videos to show on the screen.
So quick pause and I'll see you in just a minute.