Let's get back to the world of function components once again in this video, we're going to focus on
how we create a ref using the USRAP hook inside of a function component and properly type it with typescript.
So here's the very small application we're going to put together to better understand refs.
I want to once again take a look at our user search component, but now we're going to add in one additional
feature to it.
We're going to make sure that whenever we show this component on the screen, we automatically focus
or kind of select this text input.
So whenever this component appears on the screen, a user can just immediately start typing and get
some text inside there without having to first click into it.
So to do so, we're going to make a copy of our user search component just so we have kind of a separate
record of it with all this hook or something, all this stuff added to it.
We're then going to add in a ref to the text input and we'll pretty much take it from there.
So back inside my editor, I'm going to create a new folder inside the Sarsae directory called Refs.
I'll find State.
I'm going to copy user search and paste it into reps.
Then inside of our new user search file at the very top, I'm going to import the U.S.
OK, right away.
And inside of our components, we can create a new roof.
I'm going to call it input roof because we're going to assign it to that text input.
I'll then create the roof using USRAP like so.
OK, I don't see any areas, any errors here whatsoever, so you might think, hey, this is pretty
easy and straightforward.
Well, let's just keep on going and see what happens.
It's going to go down to our text input and I'm going to assign the ref to it.
So on the input will do.
Ref is input.
Ref like, so no input ref, there we go, and right away, we're going to start to see an error message
coming from this ref attributes.
So what's going on here?
Well, you can hover over it and take a look at the air, but the air is really hard to understand.
So let's just kind of cut to the chase here.
Whenever we create a ref that is going to refer to some kind of HTML element, we're going to add in
some angle brackets inside there as well.
And then some of those angled brackets we're going to describe or apply a type that's going to describe
the type of element that we're going to give this ref up to.
So the first type we're going to write inside of here is going to look a little bit mysterious.
But don't worry, I'll give you some more information on it.
I'm going to put in HTML.
OK, HTML input, there we go, element.
Notice that HTML is all capital letters, so the reason I say this is a little bit mysterious is you
might be saying, how would I ever guess this name right here?
Well, it turns out that there are different interfaces that describe all the different kinds of different
HTML elements you can create.
You can look up a list of all these different interfaces by writing out something like HTML input element
and then just do a command click on it.
As soon as you do so, you'll see a full listing of all the different interfaces describing all possible
different elements.
So we've got one for an input element right there.
We can keep on going through and find some others for you.
If I go up, there's a div right there.
There's a dialogue about an anchor element.
We can probably go down and find maybe a text area, probably find a form on this list.
I think you get the idea.
And of course, if you get lost at any point in time, you can always just do a search like in search
inside this type definition file for something like HTML form element and there's a name or an HTML
form element.
So if I wanted to apply a reference to some kind of form element, I would put that name inside of these
ÀNGEL brackets.
So HTML form element like so.
But in our case of course we're trying to apply it to an input element.
So I'm going to put in HTML input element.
Now, unfortunately, that is not the only change we need to make.
If we scroll back down, we'll still see that there's some kind of error message here.
There's two other things we're going to change on this ref.
First, remember, whenever we first render our component on the screen, we're creating this ref and
we don't really know.
Or to be more precise, TypeScript doesn't really know if this ref is actually going to be assigned
to any element yet.
So, for example, let's say that we go back down to our input element and we just delete that ref.
Propp right there now are ref that we had created is not going to have any reference or to any element
because we didn't actually apply it to any element.
So TypeScript kind of takes that into consideration.
It is aware that you might not actually apply the ref to some element that is being returned from your
component.
So to account for that case, TypeScript says, you know what, this ref you're creating right here,
it might be null.
You might not actually apply it to any element being returned from your component.
So to better describe that, we can put in HTML and put elements or No.
And then give the reef itself a default value of null as well.
So now we are telling TypeScript we're going to create a ref.
It's going to have an initial starting value of refought current of null, which means we have not assigned
anything to this ref just yet.
And then we have updated our type to say at some points in time, the ref or the thing that this ref
is pointing to might be of type null, but at other points in time, it might point to an input element.
So I know that this little declaration right here, it looks a little bit nasty, but that's pretty
much what we need to do.
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
whenever our component appears on the screen, we get access to that ref and we attempt to focus the
text input.
Let's take care of that last step in the next video.