1 00:00:01,000 --> 00:00:05,470 Let's try to build out one more small component to get a better idea of how a state works with TypeScript. 2 00:00:05,950 --> 00:00:09,820 So for this component, I want to make some kind of a user search component. 3 00:00:10,210 --> 00:00:14,200 The goal of this component, we're going to show a little title at the top, a place where a user can 4 00:00:14,200 --> 00:00:15,880 enter a name and then will find button. 5 00:00:16,780 --> 00:00:21,520 We're then going to take whatever the user types inside their attempt to find that person and then print 6 00:00:21,520 --> 00:00:24,740 out some user or some information about them at the very bottom of the screen. 7 00:00:25,150 --> 00:00:30,610 So if I were to search for, say, Sara, I would expect to see that results right there. 8 00:00:31,060 --> 00:00:35,650 And if I ever try to find someone who doesn't exist, I would expect to see something that says null 9 00:00:35,650 --> 00:00:37,300 or user not found. 10 00:00:38,530 --> 00:00:39,400 Or something like that. 11 00:00:40,030 --> 00:00:43,150 Once again, we're going to build all this stuff up inside of one single component. 12 00:00:43,730 --> 00:00:47,020 It's going to go back over to my code editor inside of my state directory. 13 00:00:47,260 --> 00:00:51,550 We'll make a new file of user search DOT, TSX. 14 00:00:53,310 --> 00:00:57,180 Then inside of here, we know right away that we're probably going to have to add in some piece of state, 15 00:00:57,540 --> 00:01:00,330 so I will import use state. 16 00:01:01,240 --> 00:01:01,930 From React. 17 00:01:02,830 --> 00:01:08,350 I'm going to make my user search component, and again, I will annotate its type. 18 00:01:09,320 --> 00:01:11,180 As React FC. 19 00:01:12,690 --> 00:01:16,140 Well, then, export default, user search at the bottom. 20 00:01:17,070 --> 00:01:22,140 As usual, right now, I'm going to place a div that just says user search. 21 00:01:24,280 --> 00:01:28,540 Save this and then go back over to our app component and just make sure we can see this thing on the 22 00:01:28,540 --> 00:01:28,920 screen. 23 00:01:29,910 --> 00:01:34,890 So back inside of Index Dot, I'm going to update the import statement to import. 24 00:01:37,010 --> 00:01:43,610 Guest list from state guest list or guest list, I just did the same exact one again. 25 00:01:43,880 --> 00:01:46,400 Now we want user search. 26 00:01:46,430 --> 00:01:48,410 I was looking at the words guest list. 27 00:01:51,860 --> 00:01:53,180 User search. 28 00:01:54,310 --> 00:01:57,340 There we go and then finally show that inside the app component. 29 00:01:58,580 --> 00:02:00,920 Quick, safe, quick test. 30 00:02:02,390 --> 00:02:04,550 I can see user search on the screen looks good. 31 00:02:05,880 --> 00:02:12,420 OK, so back inside of our component, let's first begin by adding in maybe a hard coded list of users 32 00:02:12,420 --> 00:02:15,180 that we want to search over the above my component. 33 00:02:15,450 --> 00:02:16,260 I'm going to add in. 34 00:02:17,700 --> 00:02:19,080 Users as an array. 35 00:02:20,220 --> 00:02:27,060 And I'm going to have every element inside this Arabian object that has a name and an age to first, 36 00:02:27,060 --> 00:02:30,390 I'll add in Sarah with an age of 20. 37 00:02:31,940 --> 00:02:40,400 I'm going to add in, Alex, with an age of about 20 and then finally, the name of Michael, an age 38 00:02:40,400 --> 00:02:42,470 of 20 as well, everyone is 20 in this world. 39 00:02:42,530 --> 00:02:43,060 Who knows why? 40 00:02:43,890 --> 00:02:45,590 So now we're going to add in a text input. 41 00:02:46,340 --> 00:02:50,390 We're going to somehow store whatever user types into that text input once again inside of a piece of 42 00:02:50,390 --> 00:02:50,780 state. 43 00:02:51,050 --> 00:02:55,460 Whenever user clicks on some button, we're going to iterate through our list of users and try to find 44 00:02:55,460 --> 00:02:56,480 some user inside there. 45 00:02:56,780 --> 00:02:59,540 If we find a user will display details about them on the screen. 46 00:02:59,690 --> 00:03:02,630 Otherwise, we show could not find user or something similar. 47 00:03:03,690 --> 00:03:11,010 OK, so to get started inside of user search, I'm going to first begin by adding in a name. 48 00:03:12,860 --> 00:03:13,610 He's of state. 49 00:03:17,760 --> 00:03:20,460 Inside this div, I'm going to give myself a little bit of space. 50 00:03:22,610 --> 00:03:23,780 Add in and input. 51 00:03:25,460 --> 00:03:26,960 I'm going to set its value to be name. 52 00:03:28,510 --> 00:03:34,390 And whenever someone changes this thing, I'm going to provide a callback function, I'm going to receive 53 00:03:34,390 --> 00:03:39,520 event as an argument that I'll call simply and then will update once again our name piece of state. 54 00:03:39,930 --> 00:03:43,090 I'll put in set name the target value. 55 00:03:44,880 --> 00:03:48,210 Then right after the input, we'll place a button once again. 56 00:03:50,250 --> 00:03:54,390 That says find user or you can say search or whatever else. 57 00:03:56,200 --> 00:03:59,160 And then finally, we'll put in an unclick prop to this thing as well. 58 00:04:02,200 --> 00:04:03,970 I'm going to define unclick up here. 59 00:04:07,630 --> 00:04:12,160 And so now inside of this function is where we can somehow take a look at all of our different users 60 00:04:12,160 --> 00:04:15,040 and find one with a matching name if we do that. 61 00:04:15,040 --> 00:04:18,459 However, let's just take a quick break and then wrap up this example in the next video.