In the last section we continued setting up the search bar and fixed an issue around the callback context 2
here. 3
Remember the rule of thumb if you've got a callback that makes a reference to this. 4
Chances are you need to bind it. 5
The easiest way to always do this is generally in the constructor but there is a couple of different 6
ways you know with a federal function as we did previously but you know let's not delve too much into 7
the details there. 8
OK. 9
So when I'm over in chrome with our app in progress here I'm going to go ahead and type in some search 10
strings will say like you know San Francisco San Francisco. 11
There you go. 12
And I'm going to go ahead and click on submit Angello to see that you are elde changed and the input 13
also cleared out as well. 14
That was kind of weird. 15
You know we don't have a on click handler set up on the submit button yet. 16
Let's try doing that again and this time instead of clicking submit. 17
I'm going to press the enter key and Geno's at the URL change again. 18
And our input clear it out. 19
So you know what's happening here he's got mysteries all day. 20
Well if you look back to the search bar you'll notice that we created our search bar out of the form 21
element when you press enter on your keyboard while a form element child like you know say the input 22
or the button is focused the browser automatically thinks that you're trying to submit the contents 23
of this form. 24
So when we have something or when we have our cursor inside of the input and we press ENTER or we click 25
the button the browser thinks oh they're trying to smear a small form here. 26
I need to make a POST request to the server which is happening and our server our development server 27
right now is just kicking us back to local host ADHD which really renders our entire application and 28
thus clears the form out. 29
So basically what's happening is when I click submit here it's going to make another request to the 30
back end. 31
It's going to basically reload the page. 32
App starts back up and we get our input in here. 33
So obviously that's not super ideal here. 34
You know we we don't want our forum to submit whenever someone clicks the submit button or presses enter 35
. 36
That's not super ideal. 37
By the way before we go any further let me also mention that this form summiting action is not you know 38
react it's not react specific. 39
This is a normal HMO thing. 40
This is how all browsers handle form elements. 41
You know if you have a form ELINT focused and the press enter the browser is going to try to submit 42
the form. 43
So we really want to prevent this behavior in some way right. 44
We have a single page application. 45
The user should be refreshed refreshing the page all the time. 46
We don't really want them to change each email documents at all. 47
So we can prevent this behavior by adding an event handler to the form element itself. 48
We want to handle the submit event on the form and like submit being a very particular key word here 49
that's a normal aged female form event the summit event. 50
So following the normal re-act nomenclature for handling Dohm events we're going to pass a new function 51
handler to the property named on some it and we'll say that whenever that function runs we want to run 52
the function the handler. 53
This dot on form submit. 54
So that's not defined yet. 55
So let's go ahead and do that. 56
We'll say on form submit and love our event object again. 57
So now we can use this event object right here to prevent our browser from trying to submit the form 58
at all. 59
So it's going to stop it from saying like hey you know the users probably trying to submit the form 60
to the back and I need to make a post request so we can use the event object for that. 61
All we got to do is write event dot prevent default. 62
And that basically just tells the browser don't submit the form. 63
So now let's go back over to the browser and refresh the page let's say San Francisco and then enter 64
and in person enter over here and submit submit submit summit and you'll notice that the forum doesn't 65
try to submit itself. 66
This is exactly what we want. 67
You know we don't want the forum to try to cement. 68
So you might be wondering here. 69
Why are we using a form element at all. 70
You know what's the purpose of this. 71
Why don't we just use a like you know a div or something. 72
Well we get some free functionality from using a form whenever users see a search bar like this. 73
They have kind of an expectation that they should be able to type something in and then just press enter 74
on the keyboard or click submit here and then we use a form element. 75
We get that behavior for free so we don't have to set up an you know another event handler here where 76
we say oh well if the user has the input selected in the press the Enter key in particular then try 77
to submit the form and then have a second event event handler for well if the user clicks the submit 78
button we need to go ahead and try to submit the form as well. 79
And we don't have to do all these different event handlers. 80
We can just have one handler one that says when the user tries to submit the form. 81
So really cuts down on the number of different cases in which we need to worry about how this form gets 82
submitted. 83
So in general when using forms and react you know any type of user input I really recommend you check 84
out using a forum tag just remember you always got to prevent default on there as well. 85
All right. 86
So it's looking pretty good whenever the user types and press ENTER or submits. 87
We have a very centralized location right here that says basically like at this point in time we need 88
to go and fetch weather weather data. 89
So this would be you know a fantastic place to make that happen here. 90
OK. 91
So I think the search bar is looking pretty good. 92
I think that we need to start daar diving into the harder part using this search term that we have here 93
. 94
You know this state term to make an actual request to our back and weather API. 95
So let's get started on that in the next section.