In the last section we had a long discussion about controlled fires.
Uncontrolled elements were now going to start to move forward and continue developing our application.
So at this point our search bar now knows exactly what a user is typing into that input.
Now we want to make sure that if the user presses on the enter key after entering some search term we
want to somehow trigger a search for some images and then show those images on the screen.
Now step one of implementing all that is somehow detecting when the user presses the enter key.
So in other words if I go back here and type in cars and press enter on my keyboard I want to somehow
trigger a search.
And you'll notice that right now if you type in something and press enter it looks like the entire page
refreshes.
And our search term disappears.
So at present you're seeing the default behavior of a form element.
Remember we'd put a form in to our search bar right here default.
H T.M. vanilla forms like no re-act whatsoever.
If you ever have a input element selected and you press the Enter key the form or to be more precise
your the browser is going to attempt to submit the form automatically to some back and server.
Now in this case we have no back end server so no information is taken from the form or sent anywhere
whatsoever.
The first thing that we're going to want to do is to disable that default behavior.
We do not want the entire page to refresh automatically any time the user presses enter.
Instead we want to run some custom logic of our own.
So to handle this we're going to find our form tag right here and I'm going to add event handler to
it under the name on submit and then I'll reference a callback method inside of your called this dot
on form submit.
Now remember after a method that we passed to an event handler we do not put parentheses on a no parentheses
here.
After that I'll put on my event handler up here.
This is going to be called with an event object and I do not want the form to attempt to submit itself
and thus refresh the page.
I will prevent that behavior by calling events that prevent default like so.
So this line of code right here is what's going to keep the form or the browser from trying to submit
the form automatically and in the process refresh the page.
So if we now flip back over and enter some text and press ENTER no longer is the page refreshing.
Now this is something that you're going to have to write out many many times on your own personal projects
in just about every case that use a form.
You never want the form to automatically submit itself and to prevent that we call events prevent an
event prevent default.
So we've now got some Colback here that is going to be invoked whenever the user typed something in
and presses enter as a quick exercise.
Let's just make sure that we can cancel log out the current value of the input when the user presses
enter and tries to submit the form to do so.
I can do a console log this state that term like the.
So now I can flip back over.
I'm going to make sure I pull open my console and then will enter in some text and hit enter.
And when I do you'll notice we get a nasty error message right here.
All right.
So this is going to lead us into kind of interesting javascript topic.
Let's take a quick pause right here.
When we come back the next section we're going to learn why we are seeing this error message.
I can tell you that with the code we wrote here is mostly correct.
There's just one little problem that we have inside of your.
That will be a quick and easy fix but understanding the fix can be just a little bit challenging sometimes.
So quick pause come back the next section and discuss what is going on.