All right, my friends, let's add in a little bit of code inside of our unclick function, we're going
to inside there iterate over our big list of users.
And as soon as we found a user with a name matching our name piece of state, we're going to try to
show that found user details about them underneath our button element.
So there's a couple of different ways that we can do this searching logic inside of the click function.
Maybe the best way to do this or the most appropriate would be to use the find function that is built
into all JavaScript arrays.
Let me show you how we would use that inside of UNCLICK.
I'm going to add in bound user is going to be users.
Find.
This function right here is going to be called with every user inside the user's array one by one.
It's going to receive that as an argument that I'll call user.
And then inside the function I'm going to return, user name equals, equals, equals our namespace
of state.
The find function is going to call that function right there until we return a Truthy value.
The record that we find or the user that we find will then be assigned to the found user variable.
So let's do a quick test with this right away.
I'm going to add in a console log of found user save this and then back over to the browser very quickly.
So back over here, I'm going to first try to find a user that definitely does not exist.
So if I put in some gibberish like this right here, then click on Find User, I get back undefined,
which tells me we were not able to find a user inside that array.
But if I put in the name of a user that does exist such as Sarah and then click on Find User, I do
in fact get back an object.
So it looks like the find logic is definitely working correctly.
So now all we have to do is somehow take the user we just found if we did find one.
And somehow print out some information about that user down inside of our Geass block to do so, we
might decide to add in a new piece of state to our component.
So maybe something like user and set user right here.
And then initialise that piece of state, it's now the really big question here becomes, are we going
to provide a default value right here for our or a piece of state?
Well, let's take a look at a quick diagram.
And I want to really think about all the different possible types of values that we're ever going to
assign to user.
OK, so we've got our user piece of state whenever our component is first rendered to the screen or
whenever we do a search and do not find a user, the value or the type of value of user is going to
be undefined.
But if we run our search logic and we do in fact find a user, then we're going to assign a value of
type object with a name that's a string and age.
That's a number to our user piece of state.
So essentially there are two possible types of value we are ever going to assign to user, either an
object like this or undefined.
To express that to typescript, we're going to put in a generic type to use state right here.
A generic type is where we put in a set of angled brackets like so and then write out all the different
possible types of our user piece of state inside of here.
So in this case, I will add in an object with a name.
That will be a type string and an age that will be of type no.
So that is the first possible type of user, the second possible type of user.
I'm going to add this in after putting in a single vertical pipe like so.
Would be undefined.
Those are the two possible types of values that we're ever going to assign to user.
If we now mouse over user.
We'll see that typescript totally understands that user is going to be either an object like that or
undefined.
So we can now use our setar right here that we get back to update our user piece of state after doing
our search rather than a simple console log file put in there, that user.
To found user looks good.
Now, if we go down to our Geass block right after that button, I'm going to put in a div.
And inside there, I'm going to try to print out the user's name.
I'll put in user name.
If we just put in user by itself, we get an error.
We mouseover that is because user might be undefined.
So if we ever try to reference user name while the user is undefined, we would end up with that very
classic error message that says something like cannot read property name of undefined.
So we first need to make sure that user is defined, that there is an object assigned to it before we
ever try to access the name property.
For that, we could use a very simple user and expression like so.
So this is going to say only trying to access user name if a user is a truthy value.
So user is defined will then print out user name.
If a user is undefined, then don't print out anything.
Right after that, I'm going to copy that and do a user age as well.
All right, so let's save this back over to our browser, we'll do a quick refresh.
I'm going to first try to find a user that does not exist.
And if I click on find user, I don't see anything at all, but if I put in a user that does exist,
I'll then correctly see them printed up.
Perfect.
All right, well, this looks pretty good.
So now we've now seen how we can initialize a piece of states and either rely upon type inference from
typescript or we can attempt to tell TypeScript the different possible types of values that we're ever
going to assign to this piece of state.
So this is pretty good and definitely very usable in a wide variety of components we might need to create.
All right, let's take a pause right here and continue on in just a moment.