1 00:00:01,190 --> 00:00:05,210 I'm inside of our repositories list component, so inside of here, there's some pretty basic stuff 2 00:00:05,210 --> 00:00:06,220 we need to get started with. 3 00:00:06,560 --> 00:00:10,580 We need to make sure that we add in a piece of state that is going to track whatever user types into 4 00:00:10,580 --> 00:00:11,270 the text input. 5 00:00:11,630 --> 00:00:14,180 We then need to make sure that we detect form submission. 6 00:00:14,420 --> 00:00:18,140 Whenever a user submits the form, we then want to call that action creator. 7 00:00:18,350 --> 00:00:20,960 That is going to make a request off to the NPM API for us. 8 00:00:21,620 --> 00:00:25,640 After we call that action Krater, we then eventually need to get some of our redock state into this 9 00:00:25,640 --> 00:00:29,190 component and render our list of found packages inside of here. 10 00:00:29,630 --> 00:00:32,990 So I think you can kind of guess how this stuff is going to go at the very top. 11 00:00:32,990 --> 00:00:34,670 Let's first get started by importing. 12 00:00:36,100 --> 00:00:42,790 Use state from react, so we're going to use some local state to track whatever user types into that 13 00:00:42,790 --> 00:00:43,210 input. 14 00:00:44,310 --> 00:00:45,660 I will define. 15 00:00:46,870 --> 00:00:48,760 A piece of state inside of your called term. 16 00:00:51,930 --> 00:00:57,050 And I'll give it initial value of empty string and then we will set up an on change and a value prop 17 00:00:57,050 --> 00:01:05,000 on the input itself, so a value prop of term and an unchanged prop of event, which I will abbreviate 18 00:01:05,000 --> 00:01:10,070 as E and we'll do a set term E target value. 19 00:01:13,840 --> 00:01:19,510 OK, after that, let's set up our event listener on the form and watch for a submission event so I 20 00:01:19,510 --> 00:01:23,140 will add on and on submit whenever that event occurs. 21 00:01:23,140 --> 00:01:26,080 I will call a callback function that we will call simply on simit. 22 00:01:27,480 --> 00:01:28,560 I'll define that up here. 23 00:01:29,770 --> 00:01:35,320 Now, remember, because this is a form submission event, if we just allow the behavior to behave as 24 00:01:35,320 --> 00:01:39,970 usual, then as soon as a user submits the form, the browser will refresh the page. 25 00:01:40,210 --> 00:01:41,800 Let's see that in action really quickly. 26 00:01:42,700 --> 00:01:43,480 We go back over. 27 00:01:44,490 --> 00:01:48,950 And click on Search, you'll notice that everything kind of refreshes whenever we click on Search. 28 00:01:49,260 --> 00:01:54,030 Again, that is because we are submitting the form which triggers a browser form submission that is 29 00:01:54,030 --> 00:01:57,570 almost always not the behavior that we want inside of reactor application. 30 00:01:57,840 --> 00:02:03,270 So to prevent that behavior, we're going to receive an event object as the first argument to submit 31 00:02:03,600 --> 00:02:07,920 and we need to call event prevent default inside their. 32 00:02:08,880 --> 00:02:14,280 But we do have to provide a type for that event object and remember how we do that whenever we define 33 00:02:14,280 --> 00:02:18,870 a callback function that we pass off to an event handler, as we're doing right here. 34 00:02:20,040 --> 00:02:26,280 All we have to do is hover over and submit will then get an inferred type for that event argument so 35 00:02:26,280 --> 00:02:28,440 we can really just copy that type right there. 36 00:02:30,140 --> 00:02:35,380 And apply it as the annotation for that event object and then the air goes away again. 37 00:02:35,540 --> 00:02:40,250 That's the really easy way to make sure you set up the correct types or these callback events. 38 00:02:42,200 --> 00:02:43,670 OK, so now if we save this. 39 00:02:44,550 --> 00:02:48,810 And now try to estimate whenever I click on search, no longer do I get that refreshed behavior. 40 00:02:48,990 --> 00:02:49,440 Very good. 41 00:02:50,950 --> 00:02:55,540 OK, so now inside of on summit, the only thing we really have to do is call our action creator. 42 00:02:55,960 --> 00:02:58,770 So let's take a look at how we're going to wire that up in just a moment.