1
00:00:01,250 --> 00:00:05,900
All right, my friends, let's add in a little bit of code inside of our unclick function, we're going

2
00:00:05,900 --> 00:00:09,050
to inside there iterate over our big list of users.

3
00:00:09,260 --> 00:00:14,330
And as soon as we found a user with a name matching our name piece of state, we're going to try to

4
00:00:14,360 --> 00:00:18,460
show that found user details about them underneath our button element.

5
00:00:19,130 --> 00:00:24,110
So there's a couple of different ways that we can do this searching logic inside of the click function.

6
00:00:24,450 --> 00:00:28,850
Maybe the best way to do this or the most appropriate would be to use the find function that is built

7
00:00:28,850 --> 00:00:30,290
into all JavaScript arrays.

8
00:00:30,770 --> 00:00:33,590
Let me show you how we would use that inside of UNCLICK.

9
00:00:33,600 --> 00:00:37,880
I'm going to add in bound user is going to be users.

10
00:00:40,280 --> 00:00:40,820
Find.

11
00:00:42,720 --> 00:00:47,100
This function right here is going to be called with every user inside the user's array one by one.

12
00:00:47,550 --> 00:00:50,070
It's going to receive that as an argument that I'll call user.

13
00:00:51,130 --> 00:00:56,650
And then inside the function I'm going to return, user name equals, equals, equals our namespace

14
00:00:56,650 --> 00:00:57,130
of state.

15
00:00:58,060 --> 00:01:03,970
The find function is going to call that function right there until we return a Truthy value.

16
00:01:05,099 --> 00:01:09,540
The record that we find or the user that we find will then be assigned to the found user variable.

17
00:01:10,230 --> 00:01:11,920
So let's do a quick test with this right away.

18
00:01:12,090 --> 00:01:18,510
I'm going to add in a console log of found user save this and then back over to the browser very quickly.

19
00:01:19,490 --> 00:01:23,960
So back over here, I'm going to first try to find a user that definitely does not exist.

20
00:01:24,490 --> 00:01:28,640
So if I put in some gibberish like this right here, then click on Find User, I get back undefined,

21
00:01:28,910 --> 00:01:31,750
which tells me we were not able to find a user inside that array.

22
00:01:32,390 --> 00:01:37,970
But if I put in the name of a user that does exist such as Sarah and then click on Find User, I do

23
00:01:37,970 --> 00:01:39,320
in fact get back an object.

24
00:01:39,770 --> 00:01:43,310
So it looks like the find logic is definitely working correctly.

25
00:01:43,860 --> 00:01:48,530
So now all we have to do is somehow take the user we just found if we did find one.

26
00:01:49,860 --> 00:01:54,780
And somehow print out some information about that user down inside of our Geass block to do so, we

27
00:01:54,780 --> 00:01:57,390
might decide to add in a new piece of state to our component.

28
00:01:57,750 --> 00:02:00,930
So maybe something like user and set user right here.

29
00:02:01,950 --> 00:02:06,720
And then initialise that piece of state, it's now the really big question here becomes, are we going

30
00:02:06,720 --> 00:02:09,840
to provide a default value right here for our or a piece of state?

31
00:02:10,380 --> 00:02:12,150
Well, let's take a look at a quick diagram.

32
00:02:12,150 --> 00:02:16,710
And I want to really think about all the different possible types of values that we're ever going to

33
00:02:16,710 --> 00:02:17,790
assign to user.

34
00:02:19,360 --> 00:02:24,730
OK, so we've got our user piece of state whenever our component is first rendered to the screen or

35
00:02:24,730 --> 00:02:30,340
whenever we do a search and do not find a user, the value or the type of value of user is going to

36
00:02:30,340 --> 00:02:31,300
be undefined.

37
00:02:32,080 --> 00:02:37,060
But if we run our search logic and we do in fact find a user, then we're going to assign a value of

38
00:02:37,060 --> 00:02:39,750
type object with a name that's a string and age.

39
00:02:39,760 --> 00:02:41,850
That's a number to our user piece of state.

40
00:02:42,400 --> 00:02:47,800
So essentially there are two possible types of value we are ever going to assign to user, either an

41
00:02:47,800 --> 00:02:49,990
object like this or undefined.

42
00:02:50,740 --> 00:02:55,840
To express that to typescript, we're going to put in a generic type to use state right here.

43
00:02:56,170 --> 00:03:01,720
A generic type is where we put in a set of angled brackets like so and then write out all the different

44
00:03:01,720 --> 00:03:04,750
possible types of our user piece of state inside of here.

45
00:03:05,500 --> 00:03:09,070
So in this case, I will add in an object with a name.

46
00:03:10,100 --> 00:03:13,600
That will be a type string and an age that will be of type no.

47
00:03:14,150 --> 00:03:19,340
So that is the first possible type of user, the second possible type of user.

48
00:03:19,580 --> 00:03:23,660
I'm going to add this in after putting in a single vertical pipe like so.

49
00:03:24,690 --> 00:03:26,040
Would be undefined.

50
00:03:27,140 --> 00:03:30,800
Those are the two possible types of values that we're ever going to assign to user.

51
00:03:31,920 --> 00:03:33,540
If we now mouse over user.

52
00:03:35,020 --> 00:03:39,910
We'll see that typescript totally understands that user is going to be either an object like that or

53
00:03:39,940 --> 00:03:40,600
undefined.

54
00:03:41,800 --> 00:03:47,680
So we can now use our setar right here that we get back to update our user piece of state after doing

55
00:03:47,680 --> 00:03:52,270
our search rather than a simple console log file put in there, that user.

56
00:03:53,200 --> 00:03:55,960
To found user looks good.

57
00:03:57,600 --> 00:04:01,680
Now, if we go down to our Geass block right after that button, I'm going to put in a div.

58
00:04:04,950 --> 00:04:08,160
And inside there, I'm going to try to print out the user's name.

59
00:04:08,580 --> 00:04:09,720
I'll put in user name.

60
00:04:10,320 --> 00:04:12,480
If we just put in user by itself, we get an error.

61
00:04:12,540 --> 00:04:15,670
We mouseover that is because user might be undefined.

62
00:04:15,960 --> 00:04:20,519
So if we ever try to reference user name while the user is undefined, we would end up with that very

63
00:04:20,519 --> 00:04:24,680
classic error message that says something like cannot read property name of undefined.

64
00:04:25,110 --> 00:04:30,540
So we first need to make sure that user is defined, that there is an object assigned to it before we

65
00:04:30,540 --> 00:04:32,130
ever try to access the name property.

66
00:04:32,670 --> 00:04:37,220
For that, we could use a very simple user and expression like so.

67
00:04:37,650 --> 00:04:43,800
So this is going to say only trying to access user name if a user is a truthy value.

68
00:04:44,360 --> 00:04:47,280
So user is defined will then print out user name.

69
00:04:47,640 --> 00:04:50,400
If a user is undefined, then don't print out anything.

70
00:04:51,500 --> 00:04:55,520
Right after that, I'm going to copy that and do a user age as well.

71
00:04:57,000 --> 00:05:01,210
All right, so let's save this back over to our browser, we'll do a quick refresh.

72
00:05:02,070 --> 00:05:04,380
I'm going to first try to find a user that does not exist.

73
00:05:05,910 --> 00:05:11,190
And if I click on find user, I don't see anything at all, but if I put in a user that does exist,

74
00:05:11,790 --> 00:05:13,440
I'll then correctly see them printed up.

75
00:05:14,260 --> 00:05:14,830
Perfect.

76
00:05:15,700 --> 00:05:17,260
All right, well, this looks pretty good.

77
00:05:18,040 --> 00:05:23,950
So now we've now seen how we can initialize a piece of states and either rely upon type inference from

78
00:05:23,950 --> 00:05:29,500
typescript or we can attempt to tell TypeScript the different possible types of values that we're ever

79
00:05:29,500 --> 00:05:30,970
going to assign to this piece of state.

80
00:05:31,630 --> 00:05:36,940
So this is pretty good and definitely very usable in a wide variety of components we might need to create.

81
00:05:38,130 --> 00:05:40,770
All right, let's take a pause right here and continue on in just a moment.