Let's try to build out one more small component to get a better idea of how a state works with TypeScript.
So for this component, I want to make some kind of a user search component.
The goal of this component, we're going to show a little title at the top, a place where a user can
enter a name and then will find button.
We're then going to take whatever the user types inside their attempt to find that person and then print
out some user or some information about them at the very bottom of the screen.
So if I were to search for, say, Sara, I would expect to see that results right there.
And if I ever try to find someone who doesn't exist, I would expect to see something that says null
or user not found.
Or something like that.
Once again, we're going to build all this stuff up inside of one single component.
It's going to go back over to my code editor inside of my state directory.
We'll make a new file of user search DOT, TSX.
Then inside of here, we know right away that we're probably going to have to add in some piece of state,
so I will import use state.
From React.
I'm going to make my user search component, and again, I will annotate its type.
As React FC.
Well, then, export default, user search at the bottom.
As usual, right now, I'm going to place a div that just says user search.
Save this and then go back over to our app component and just make sure we can see this thing on the
screen.
So back inside of Index Dot, I'm going to update the import statement to import.
Guest list from state guest list or guest list, I just did the same exact one again.
Now we want user search.
I was looking at the words guest list.
User search.
There we go and then finally show that inside the app component.
Quick, safe, quick test.
I can see user search on the screen looks good.
OK, so back inside of our component, let's first begin by adding in maybe a hard coded list of users
that we want to search over the above my component.
I'm going to add in.
Users as an array.
And I'm going to have every element inside this Arabian object that has a name and an age to first,
I'll add in Sarah with an age of 20.
I'm going to add in, Alex, with an age of about 20 and then finally, the name of Michael, an age
of 20 as well, everyone is 20 in this world.
Who knows why?
So now we're going to add in a text input.
We're going to somehow store whatever user types into that text input once again inside of a piece of
state.
Whenever user clicks on some button, we're going to iterate through our list of users and try to find
some user inside there.
If we find a user will display details about them on the screen.
Otherwise, we show could not find user or something similar.
OK, so to get started inside of user search, I'm going to first begin by adding in a name.
He's of state.
Inside this div, I'm going to give myself a little bit of space.
Add in and input.
I'm going to set its value to be name.
And whenever someone changes this thing, I'm going to provide a callback function, I'm going to receive
event as an argument that I'll call simply and then will update once again our name piece of state.
I'll put in set name the target value.
Then right after the input, we'll place a button once again.
That says find user or you can say search or whatever else.
And then finally, we'll put in an unclick prop to this thing as well.
I'm going to define unclick up here.
And so now inside of this function is where we can somehow take a look at all of our different users
and find one with a matching name if we do that.
However, let's just take a quick break and then wrap up this example in the next video.