1

00:00:01,000  -->  00:00:07,560
In the last section we continued setting up the search bar and fixed an issue around the callback context

2

00:00:07,560  -->  00:00:08,270
here.

3

00:00:08,310  -->  00:00:13,930
Remember the rule of thumb if you've got a callback that makes a reference to this.

4

00:00:14,040  -->  00:00:16,870
Chances are you need to bind it.

5

00:00:17,190  -->  00:00:20,940
The easiest way to always do this is generally in the constructor but there is a couple of different

6

00:00:20,940  -->  00:00:25,950
ways you know with a federal function as we did previously but you know let's not delve too much into

7

00:00:25,950  -->  00:00:27,230
the details there.

8

00:00:27,680  -->  00:00:28,510
OK.

9

00:00:29,040  -->  00:00:36,030
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

00:00:36,030  -->  00:00:40,180
strings will say like you know San Francisco San Francisco.

11

00:00:40,260  -->  00:00:41,350
There you go.

12

00:00:41,370  -->  00:00:49,290
And I'm going to go ahead and click on submit Angello to see that you are elde changed and the input

13

00:00:49,290  -->  00:00:50,650
also cleared out as well.

14

00:00:50,650  -->  00:00:52,490
That was kind of weird.

15

00:00:52,590  -->  00:00:56,570
You know we don't have a on click handler set up on the submit button yet.

16

00:00:56,850  -->  00:01:01,310
Let's try doing that again and this time instead of clicking submit.

17

00:01:01,320  -->  00:01:05,810
I'm going to press the enter key and Geno's at the URL change again.

18

00:01:05,820  -->  00:01:07,190
And our input clear it out.

19

00:01:07,230  -->  00:01:10,690
So you know what's happening here he's got mysteries all day.

20

00:01:11,100  -->  00:01:17,550
Well if you look back to the search bar you'll notice that we created our search bar out of the form

21

00:01:17,640  -->  00:01:28,020
element when you press enter on your keyboard while a form element child like you know say the input

22

00:01:28,050  -->  00:01:33,900
or the button is focused the browser automatically thinks that you're trying to submit the contents

23

00:01:33,900  -->  00:01:34,900
of this form.

24

00:01:35,220  -->  00:01:41,160
So when we have something or when we have our cursor inside of the input and we press ENTER or we click

25

00:01:41,160  -->  00:01:45,630
the button the browser thinks oh they're trying to smear a small form here.

26

00:01:45,630  -->  00:01:51,330
I need to make a POST request to the server which is happening and our server our development server

27

00:01:51,360  -->  00:01:59,250
right now is just kicking us back to local host ADHD which really renders our entire application and

28

00:01:59,250  -->  00:02:00,660
thus clears the form out.

29

00:02:00,720  -->  00:02:05,340
So basically what's happening is when I click submit here it's going to make another request to the

30

00:02:05,340  -->  00:02:05,930
back end.

31

00:02:05,980  -->  00:02:08,190
It's going to basically reload the page.

32

00:02:08,470  -->  00:02:12,290
App starts back up and we get our input in here.

33

00:02:12,450  -->  00:02:14,450
So obviously that's not super ideal here.

34

00:02:14,460  -->  00:02:22,140
You know we we don't want our forum to submit whenever someone clicks the submit button or presses enter

35

00:02:22,140  -->  00:02:22,170
.

36

00:02:22,170  -->  00:02:24,230
That's not super ideal.

37

00:02:24,270  -->  00:02:29,750
By the way before we go any further let me also mention that this form summiting action is not you know

38

00:02:29,760  -->  00:02:32,190
react it's not react specific.

39

00:02:32,190  -->  00:02:33,870
This is a normal HMO thing.

40

00:02:33,870  -->  00:02:37,050
This is how all browsers handle form elements.

41

00:02:37,050  -->  00:02:42,120
You know if you have a form ELINT focused and the press enter the browser is going to try to submit

42

00:02:42,120  -->  00:02:44,070
the form.

43

00:02:44,130  -->  00:02:47,090
So we really want to prevent this behavior in some way right.

44

00:02:47,100  -->  00:02:49,200
We have a single page application.

45

00:02:49,200  -->  00:02:52,730
The user should be refreshed refreshing the page all the time.

46

00:02:52,830  -->  00:02:56,130
We don't really want them to change each email documents at all.

47

00:02:56,520  -->  00:03:03,570
So we can prevent this behavior by adding an event handler to the form element itself.

48

00:03:03,570  -->  00:03:09,900
We want to handle the submit event on the form and like submit being a very particular key word here

49

00:03:10,560  -->  00:03:14,820
that's a normal aged female form event the summit event.

50

00:03:15,120  -->  00:03:21,360
So following the normal re-act nomenclature for handling Dohm events we're going to pass a new function

51

00:03:21,370  -->  00:03:30,570
handler to the property named on some it and we'll say that whenever that function runs we want to run

52

00:03:30,570  -->  00:03:32,400
the function the handler.

53

00:03:32,730  -->  00:03:38,230
This dot on form submit.

54

00:03:38,230  -->  00:03:39,760
So that's not defined yet.

55

00:03:39,780  -->  00:03:40,790
So let's go ahead and do that.

56

00:03:40,800  -->  00:03:49,440
We'll say on form submit and love our event object again.

57

00:03:49,500  -->  00:03:56,100
So now we can use this event object right here to prevent our browser from trying to submit the form

58

00:03:56,100  -->  00:03:56,430
at all.

59

00:03:56,430  -->  00:04:01,320
So it's going to stop it from saying like hey you know the users probably trying to submit the form

60

00:04:01,320  -->  00:04:06,330
to the back and I need to make a post request so we can use the event object for that.

61

00:04:06,340  -->  00:04:11,040
All we got to do is write event dot prevent default.

62

00:04:11,510  -->  00:04:15,240
And that basically just tells the browser don't submit the form.

63

00:04:15,300  -->  00:04:23,010
So now let's go back over to the browser and refresh the page let's say San Francisco and then enter

64

00:04:23,130  -->  00:04:28,320
and in person enter over here and submit submit submit summit and you'll notice that the forum doesn't

65

00:04:28,320  -->  00:04:29,940
try to submit itself.

66

00:04:30,450  -->  00:04:31,630
This is exactly what we want.

67

00:04:31,650  -->  00:04:33,830
You know we don't want the forum to try to cement.

68

00:04:33,970  -->  00:04:35,560
So you might be wondering here.

69

00:04:36,070  -->  00:04:38,080
Why are we using a form element at all.

70

00:04:38,100  -->  00:04:39,090
You know what's the purpose of this.

71

00:04:39,090  -->  00:04:42,830
Why don't we just use a like you know a div or something.

72

00:04:43,350  -->  00:04:49,740
Well we get some free functionality from using a form whenever users see a search bar like this.

73

00:04:49,740  -->  00:04:54,870
They have kind of an expectation that they should be able to type something in and then just press enter

74

00:04:54,870  -->  00:05:00,000
on the keyboard or click submit here and then we use a form element.

75

00:05:00,000  -->  00:05:05,550
We get that behavior for free so we don't have to set up an you know another event handler here where

76

00:05:05,550  -->  00:05:11,850
we say oh well if the user has the input selected in the press the Enter key in particular then try

77

00:05:11,850  -->  00:05:17,820
to submit the form and then have a second event event handler for well if the user clicks the submit

78

00:05:17,820  -->  00:05:20,820
button we need to go ahead and try to submit the form as well.

79

00:05:20,940  -->  00:05:23,900
And we don't have to do all these different event handlers.

80

00:05:24,090  -->  00:05:30,240
We can just have one handler one that says when the user tries to submit the form.

81

00:05:30,240  -->  00:05:34,440
So really cuts down on the number of different cases in which we need to worry about how this form gets

82

00:05:34,440  -->  00:05:35,880
submitted.

83

00:05:35,880  -->  00:05:41,520
So in general when using forms and react you know any type of user input I really recommend you check

84

00:05:41,520  -->  00:05:47,400
out using a forum tag just remember you always got to prevent default on there as well.

85

00:05:47,950  -->  00:05:48,480
All right.

86

00:05:48,720  -->  00:05:54,320
So it's looking pretty good whenever the user types and press ENTER or submits.

87

00:05:54,570  -->  00:06:01,920
We have a very centralized location right here that says basically like at this point in time we need

88

00:06:01,920  -->  00:06:06,780
to go and fetch weather weather data.

89

00:06:06,840  -->  00:06:09,970
So this would be you know a fantastic place to make that happen here.

90

00:06:10,680  -->  00:06:11,220
OK.

91

00:06:11,220  -->  00:06:13,960
So I think the search bar is looking pretty good.

92

00:06:14,010  -->  00:06:19,650
I think that we need to start daar diving into the harder part using this search term that we have here

93

00:06:19,670  -->  00:06:19,700
.

94

00:06:19,720  -->  00:06:26,020
You know this state term to make an actual request to our back and weather API.

95

00:06:26,190  -->  00:06:28,510
So let's get started on that in the next section.