1 00:00:00,950 --> 00:00:04,820 Let's get back to the world of function components once again in this video, we're going to focus on 2 00:00:04,820 --> 00:00:11,070 how we create a ref using the USRAP hook inside of a function component and properly type it with typescript. 3 00:00:11,630 --> 00:00:15,580 So here's the very small application we're going to put together to better understand refs. 4 00:00:16,100 --> 00:00:20,960 I want to once again take a look at our user search component, but now we're going to add in one additional 5 00:00:20,960 --> 00:00:21,700 feature to it. 6 00:00:21,950 --> 00:00:26,420 We're going to make sure that whenever we show this component on the screen, we automatically focus 7 00:00:26,420 --> 00:00:28,810 or kind of select this text input. 8 00:00:29,120 --> 00:00:33,950 So whenever this component appears on the screen, a user can just immediately start typing and get 9 00:00:33,950 --> 00:00:36,800 some text inside there without having to first click into it. 10 00:00:37,400 --> 00:00:42,680 So to do so, we're going to make a copy of our user search component just so we have kind of a separate 11 00:00:42,680 --> 00:00:46,130 record of it with all this hook or something, all this stuff added to it. 12 00:00:46,430 --> 00:00:50,160 We're then going to add in a ref to the text input and we'll pretty much take it from there. 13 00:00:50,900 --> 00:00:56,120 So back inside my editor, I'm going to create a new folder inside the Sarsae directory called Refs. 14 00:00:56,990 --> 00:00:58,250 I'll find State. 15 00:00:58,260 --> 00:01:02,630 I'm going to copy user search and paste it into reps. 16 00:01:04,140 --> 00:01:09,710 Then inside of our new user search file at the very top, I'm going to import the U.S. 17 00:01:10,050 --> 00:01:10,770 OK, right away. 18 00:01:13,080 --> 00:01:15,490 And inside of our components, we can create a new roof. 19 00:01:15,840 --> 00:01:19,690 I'm going to call it input roof because we're going to assign it to that text input. 20 00:01:20,400 --> 00:01:23,100 I'll then create the roof using USRAP like so. 21 00:01:24,460 --> 00:01:29,950 OK, I don't see any areas, any errors here whatsoever, so you might think, hey, this is pretty 22 00:01:29,950 --> 00:01:30,970 easy and straightforward. 23 00:01:31,300 --> 00:01:33,640 Well, let's just keep on going and see what happens. 24 00:01:34,190 --> 00:01:37,410 It's going to go down to our text input and I'm going to assign the ref to it. 25 00:01:37,420 --> 00:01:38,590 So on the input will do. 26 00:01:38,620 --> 00:01:40,330 Ref is input. 27 00:01:41,390 --> 00:01:47,360 Ref like, so no input ref, there we go, and right away, we're going to start to see an error message 28 00:01:47,360 --> 00:01:48,830 coming from this ref attributes. 29 00:01:49,250 --> 00:01:50,240 So what's going on here? 30 00:01:50,390 --> 00:01:55,310 Well, you can hover over it and take a look at the air, but the air is really hard to understand. 31 00:01:55,550 --> 00:01:57,380 So let's just kind of cut to the chase here. 32 00:01:58,010 --> 00:02:02,690 Whenever we create a ref that is going to refer to some kind of HTML element, we're going to add in 33 00:02:02,690 --> 00:02:04,940 some angle brackets inside there as well. 34 00:02:05,360 --> 00:02:10,430 And then some of those angled brackets we're going to describe or apply a type that's going to describe 35 00:02:10,430 --> 00:02:13,550 the type of element that we're going to give this ref up to. 36 00:02:14,240 --> 00:02:17,330 So the first type we're going to write inside of here is going to look a little bit mysterious. 37 00:02:17,330 --> 00:02:19,450 But don't worry, I'll give you some more information on it. 38 00:02:20,030 --> 00:02:21,650 I'm going to put in HTML. 39 00:02:23,490 --> 00:02:26,410 OK, HTML input, there we go, element. 40 00:02:26,970 --> 00:02:32,430 Notice that HTML is all capital letters, so the reason I say this is a little bit mysterious is you 41 00:02:32,430 --> 00:02:35,430 might be saying, how would I ever guess this name right here? 42 00:02:35,970 --> 00:02:40,740 Well, it turns out that there are different interfaces that describe all the different kinds of different 43 00:02:40,950 --> 00:02:42,210 HTML elements you can create. 44 00:02:42,570 --> 00:02:47,850 You can look up a list of all these different interfaces by writing out something like HTML input element 45 00:02:48,000 --> 00:02:49,710 and then just do a command click on it. 46 00:02:50,460 --> 00:02:55,290 As soon as you do so, you'll see a full listing of all the different interfaces describing all possible 47 00:02:55,290 --> 00:02:56,570 different elements. 48 00:02:56,940 --> 00:02:58,860 So we've got one for an input element right there. 49 00:02:59,490 --> 00:03:02,570 We can keep on going through and find some others for you. 50 00:03:02,590 --> 00:03:04,740 If I go up, there's a div right there. 51 00:03:04,980 --> 00:03:08,220 There's a dialogue about an anchor element. 52 00:03:08,640 --> 00:03:13,380 We can probably go down and find maybe a text area, probably find a form on this list. 53 00:03:13,380 --> 00:03:14,430 I think you get the idea. 54 00:03:14,820 --> 00:03:18,540 And of course, if you get lost at any point in time, you can always just do a search like in search 55 00:03:18,540 --> 00:03:25,050 inside this type definition file for something like HTML form element and there's a name or an HTML 56 00:03:25,050 --> 00:03:25,780 form element. 57 00:03:26,250 --> 00:03:32,820 So if I wanted to apply a reference to some kind of form element, I would put that name inside of these 58 00:03:32,820 --> 00:03:33,690 ÀNGEL brackets. 59 00:03:33,690 --> 00:03:35,550 So HTML form element like so. 60 00:03:36,030 --> 00:03:39,120 But in our case of course we're trying to apply it to an input element. 61 00:03:39,360 --> 00:03:41,480 So I'm going to put in HTML input element. 62 00:03:42,270 --> 00:03:45,000 Now, unfortunately, that is not the only change we need to make. 63 00:03:45,270 --> 00:03:48,510 If we scroll back down, we'll still see that there's some kind of error message here. 64 00:03:49,280 --> 00:03:51,900 There's two other things we're going to change on this ref. 65 00:03:52,440 --> 00:03:58,470 First, remember, whenever we first render our component on the screen, we're creating this ref and 66 00:03:58,470 --> 00:03:59,610 we don't really know. 67 00:03:59,610 --> 00:04:04,920 Or to be more precise, TypeScript doesn't really know if this ref is actually going to be assigned 68 00:04:04,920 --> 00:04:05,970 to any element yet. 69 00:04:06,270 --> 00:04:11,280 So, for example, let's say that we go back down to our input element and we just delete that ref. 70 00:04:11,280 --> 00:04:17,279 Propp right there now are ref that we had created is not going to have any reference or to any element 71 00:04:17,459 --> 00:04:19,440 because we didn't actually apply it to any element. 72 00:04:19,950 --> 00:04:22,170 So TypeScript kind of takes that into consideration. 73 00:04:22,320 --> 00:04:26,850 It is aware that you might not actually apply the ref to some element that is being returned from your 74 00:04:26,850 --> 00:04:27,420 component. 75 00:04:28,080 --> 00:04:32,520 So to account for that case, TypeScript says, you know what, this ref you're creating right here, 76 00:04:32,550 --> 00:04:33,810 it might be null. 77 00:04:34,140 --> 00:04:39,480 You might not actually apply it to any element being returned from your component. 78 00:04:40,860 --> 00:04:46,140 So to better describe that, we can put in HTML and put elements or No. 79 00:04:47,110 --> 00:04:50,440 And then give the reef itself a default value of null as well. 80 00:04:51,100 --> 00:04:53,650 So now we are telling TypeScript we're going to create a ref. 81 00:04:53,950 --> 00:04:59,440 It's going to have an initial starting value of refought current of null, which means we have not assigned 82 00:04:59,440 --> 00:05:00,640 anything to this ref just yet. 83 00:05:01,150 --> 00:05:06,460 And then we have updated our type to say at some points in time, the ref or the thing that this ref 84 00:05:06,460 --> 00:05:13,480 is pointing to might be of type null, but at other points in time, it might point to an input element. 85 00:05:14,420 --> 00:05:18,290 So I know that this little declaration right here, it looks a little bit nasty, but that's pretty 86 00:05:18,290 --> 00:05:19,370 much what we need to do. 87 00:05:20,800 --> 00:05:25,990 All right, so now we've got our ref and we put it up to our input, now we just need to make sure that 88 00:05:25,990 --> 00:05:30,970 whenever our component appears on the screen, we get access to that ref and we attempt to focus the 89 00:05:30,970 --> 00:05:31,780 text input. 90 00:05:32,480 --> 00:05:34,330 Let's take care of that last step in the next video.