1 00:00:00,990 --> 00:00:05,010 We are now all done with our little search widget, Sorina, start to move forward to our next one, 2 00:00:05,040 --> 00:00:06,690 which is going to be a little dropdown. 3 00:00:07,150 --> 00:00:12,810 And the overall goal of this dropdown is to get some more practice with you, state use effect and a 4 00:00:12,810 --> 00:00:15,300 new hook that we're going to discuss called use RF. 5 00:00:16,050 --> 00:00:20,700 The overall goal of the dropdown itself is to show some list of options the user is going to click on. 6 00:00:20,700 --> 00:00:22,260 This little menu is going to open up. 7 00:00:22,620 --> 00:00:26,460 And for this initial example, we're just gonna throw in some different colors that a user can select. 8 00:00:26,730 --> 00:00:27,960 The red, green and blue. 9 00:00:28,710 --> 00:00:33,990 Whenever a user changes a color selection, we're then going to update some text color immediately after 10 00:00:33,990 --> 00:00:34,230 it. 11 00:00:34,750 --> 00:00:35,460 That's pretty much it. 12 00:00:36,330 --> 00:00:40,980 Now, the dropdown itself, we are going to make reusable, unlike the search over here. 13 00:00:41,230 --> 00:00:45,840 So this little search widget, it was technically reusable, but it didn't really accept or receive 14 00:00:45,870 --> 00:00:46,620 any props. 15 00:00:46,980 --> 00:00:51,990 And so there was a limited ability for us to somehow customize how it worked with the dropdown. 16 00:00:52,080 --> 00:00:54,570 On the other hand, we definitely got to make this thing reusable. 17 00:00:54,600 --> 00:00:59,070 And that means that we need to be able to customize the options that are provided inside the dropdown. 18 00:00:59,670 --> 00:01:03,990 So let's take a look at an architecture diagram or two and understand how we're gonna put this thing 19 00:01:03,990 --> 00:01:04,410 together. 20 00:01:05,780 --> 00:01:06,060 All right. 21 00:01:06,110 --> 00:01:08,060 So we're once again going to have our app component. 22 00:01:08,120 --> 00:01:12,800 It's going to show this dropdown, the app component is going to have a list of options. 23 00:01:13,020 --> 00:01:16,840 So these are going to be the different options a user can select in the drop down menu. 24 00:01:17,870 --> 00:01:21,500 These options will be provided as props down to the drop down component. 25 00:01:23,220 --> 00:01:26,420 And the drop dropdown is going to use that set of options to decide what to show. 26 00:01:27,450 --> 00:01:30,300 The options itself is going to be an array of objects. 27 00:01:31,020 --> 00:01:35,370 So this might be a what the data structure looks like, there'll be an array of objects where every 28 00:01:35,370 --> 00:01:37,560 object has a label and a value. 29 00:01:38,100 --> 00:01:43,170 So in this case, if we pass down an array of objects that have red, green and blue, whenever a user 30 00:01:43,200 --> 00:01:45,630 opens up that dropdown, we should show options. 31 00:01:45,690 --> 00:01:47,190 Red, green and blue. 32 00:01:48,170 --> 00:01:51,560 You might be curious why we have both a label and a value property. 33 00:01:52,190 --> 00:01:55,580 Well, it's really straightforward when we show some text to the user right here. 34 00:01:55,670 --> 00:01:58,630 We might want to not precisely say something like red. 35 00:01:58,670 --> 00:02:05,240 We might want to say something like the color red and say the color green. 36 00:02:07,160 --> 00:02:09,440 And a shade of blue. 37 00:02:10,430 --> 00:02:12,770 The label is what actually gets displayed to the user. 38 00:02:13,280 --> 00:02:16,520 The value is how we interpret whatever the user selects. 39 00:02:17,000 --> 00:02:23,180 So a value of simply red is a lot easier for you and I to use in some way, then try to pass this label 40 00:02:23,180 --> 00:02:25,610 and understand what the user just selected. 41 00:02:25,970 --> 00:02:28,030 That's why we have both a label and a value. 42 00:02:29,410 --> 00:02:34,000 Besides this set of props, we are also gonna have some state aid to this component as well. 43 00:02:34,750 --> 00:02:39,790 We're going to call the states or the single piece of state selection and selection is going to record 44 00:02:39,850 --> 00:02:41,380 what they currently selected. 45 00:02:41,440 --> 00:02:46,940 Option is selection is going to exist inside of the parent component, which in this case is app. 46 00:02:47,590 --> 00:02:54,010 And we're going to provide that down as a prop as well to the dropdown to tell it what it should currently 47 00:02:54,010 --> 00:02:54,820 have selected. 48 00:02:55,630 --> 00:03:00,250 You should really think of this as kind of like the relationship between a component and an input field 49 00:03:00,280 --> 00:03:04,870 where, remember, we've got some kind of value that we specify on the input to tell it what the current 50 00:03:04,870 --> 00:03:06,070 value of the input is. 51 00:03:06,640 --> 00:03:08,260 Very similar for the dropdown here as well. 52 00:03:09,360 --> 00:03:09,570 All right. 53 00:03:09,650 --> 00:03:12,330 Let's just kind of a quick overview on some of the things we need to be aware of. 54 00:03:12,780 --> 00:03:18,030 Now, if any of the stuff right now looks unclear, particularly around this selection, bit fully fine. 55 00:03:18,090 --> 00:03:21,090 As soon as we start to write out some code, you'll have a good idea of what's going on. 56 00:03:21,810 --> 00:03:25,230 Let's pause right here and then start to put together this dropdown in just a moment.