1 00:00:01,580 --> 00:00:06,470 Back inside of our code editor, let's create a new file inside of our components directory called DropDown 2 00:00:06,530 --> 00:00:07,470 Dot J.S.. 3 00:00:08,270 --> 00:00:12,380 As usual, we'll put together just a little bit of boilerplate inside of here and then show that component 4 00:00:12,410 --> 00:00:13,700 inside of our app component. 5 00:00:14,330 --> 00:00:17,960 So at the very top, I will import react from react. 6 00:00:19,530 --> 00:00:21,180 Well, then make a dropdown. 7 00:00:24,080 --> 00:00:27,160 And right now, as usual, the simple H1. 8 00:00:28,350 --> 00:00:29,200 It says dropdown. 9 00:00:30,290 --> 00:00:33,230 And an export default dropped down at the bottom. 10 00:00:36,090 --> 00:00:37,350 Let's now go back over to our APT. 11 00:00:37,520 --> 00:00:38,190 James file. 12 00:00:39,640 --> 00:00:40,540 Here's APJ, yes. 13 00:00:41,020 --> 00:00:42,730 At the very top, we will import. 14 00:00:49,930 --> 00:00:54,190 Once we've got that important place, well, then go down to the component itself and once again right 15 00:00:54,190 --> 00:00:58,720 now, we're just going to manually change which component you're are displaying again later on as we 16 00:00:58,720 --> 00:01:00,130 finish up all these different widgets. 17 00:01:00,340 --> 00:01:03,010 We will eventually introduce some navigation between them. 18 00:01:03,320 --> 00:01:06,850 So right now, we'll just delete, search and replace it with dropdown. 19 00:01:08,690 --> 00:01:12,590 Let's save that and just do a quick refresh of our app over here. 20 00:01:14,380 --> 00:01:15,730 And make sure that we see dropped down. 21 00:01:15,820 --> 00:01:16,270 Very good. 22 00:01:16,930 --> 00:01:17,100 All right. 23 00:01:17,180 --> 00:01:17,800 That's simple enough. 24 00:01:18,400 --> 00:01:21,670 Now, the next thing we're going to do is put together that options array. 25 00:01:22,360 --> 00:01:27,460 No options, as we just discussed, is going to be an array of objects. 26 00:01:27,970 --> 00:01:33,280 We're going to define options inside of our app component and then pass it down to the dropdown as props. 27 00:01:33,590 --> 00:01:36,970 And it's going to specify what different options we want to show inside the dropdown. 28 00:01:38,260 --> 00:01:40,140 So back inside of our app component file. 29 00:01:42,060 --> 00:01:44,520 I'm going to declare right above the component self. 30 00:01:45,530 --> 00:01:46,460 An array of options. 31 00:01:47,130 --> 00:01:49,880 Now we can define this inside the component, outside the component. 32 00:01:49,940 --> 00:01:53,690 It really doesn't make a difference because this is going to be a static array of data. 33 00:01:53,750 --> 00:01:55,310 It's not going to change in any way. 34 00:01:55,700 --> 00:01:58,310 So it doesn't matter if we define this inside the component or outside. 35 00:01:59,320 --> 00:02:03,970 Inside of options, we'll put together three different objects and each one will have a label and a 36 00:02:03,970 --> 00:02:04,420 value. 37 00:02:05,380 --> 00:02:08,260 We will first put in a label of the color red. 38 00:02:09,440 --> 00:02:10,220 The value of red. 39 00:02:12,840 --> 00:02:15,130 A label of the color green. 40 00:02:16,730 --> 00:02:18,210 With a value of green. 41 00:02:19,750 --> 00:02:20,410 And then finally. 42 00:02:21,930 --> 00:02:25,940 Label of a shade of blue, but the value of. 43 00:02:31,300 --> 00:02:36,460 Now we can take this array of options and pass it down as a property into our drop down component. 44 00:02:37,190 --> 00:02:39,070 We'll say options is options. 45 00:02:41,210 --> 00:02:45,140 The whole goal behind this is to make sure that we can make use of the drop down component in different 46 00:02:45,140 --> 00:02:49,280 places inside of application and have them show a different list of options to the user. 47 00:02:49,610 --> 00:02:52,340 That's why we are defined this as props are we're gonna pass down. 48 00:02:53,960 --> 00:02:54,680 So it looks good. 49 00:02:55,100 --> 00:02:55,880 Let's take a pause here. 50 00:02:55,970 --> 00:02:59,930 When I come back, the next video, we're going to start to add in a lot more jail sex inside of our 51 00:02:59,930 --> 00:03:01,040 drop down component self. 52 00:03:01,520 --> 00:03:05,810 We're going to map over that list of options and show it inside of some nice looking menu.