1 00:00:01,510 --> 00:00:03,790 Let's get started on this new translate component. 2 00:00:04,420 --> 00:00:05,440 Back inside my editor. 3 00:00:06,840 --> 00:00:08,610 I'm going to find my components directory. 4 00:00:08,910 --> 00:00:14,370 Inside there, I'll make a new file called Translate Dot J.S. inside of here at the very top. 5 00:00:14,400 --> 00:00:17,070 I'm going to import react from react. 6 00:00:17,790 --> 00:00:20,340 I will also import my dropdown component. 7 00:00:21,520 --> 00:00:22,500 From dropdown. 8 00:00:24,160 --> 00:00:28,160 From react, we probably also need to get the use state hook as well. 9 00:00:28,880 --> 00:00:29,900 Let's just get that right away. 10 00:00:31,680 --> 00:00:32,730 And then going to declare. 11 00:00:33,910 --> 00:00:35,050 Why translate component? 12 00:00:37,520 --> 00:00:38,560 And then I'll export it. 13 00:00:40,440 --> 00:00:40,980 At the bottom. 14 00:00:42,740 --> 00:00:46,730 Now, usually we return and each one inside, if you're just get everything working, I think we've 15 00:00:46,730 --> 00:00:47,390 done that enough. 16 00:00:47,480 --> 00:00:49,880 So let's just start putting some code inside of your right away. 17 00:00:50,560 --> 00:00:51,380 Inside of translate. 18 00:00:52,930 --> 00:00:58,240 We're going to return a couple of different elements, but right now we'll just return a d'Hiv, an 19 00:00:58,270 --> 00:01:00,580 insider, we want to have an instance of our dropdown. 20 00:01:01,580 --> 00:01:05,520 The translate itself is going to provide some options to the dropdown. 21 00:01:06,040 --> 00:01:11,380 It's also going to provide the currently selected item and a callback to change the currently selected 22 00:01:11,380 --> 00:01:11,650 item. 23 00:01:12,550 --> 00:01:14,500 Let's first write out our list of options. 24 00:01:15,250 --> 00:01:18,400 We're going to hardcoded once again right above our translate component. 25 00:01:18,850 --> 00:01:20,740 So up you're going to put in options. 26 00:01:21,070 --> 00:01:23,500 These are gonna be the possible options a user can select. 27 00:01:25,360 --> 00:01:29,450 We're gonna have the same options we just saw in that diagram, though, this one right here. 28 00:01:30,230 --> 00:01:33,230 We'll start off with a label of Afrikaans. 29 00:01:34,730 --> 00:01:39,350 With a value of A.F. And again, please make sure you put in exactly A.F. right here. 30 00:01:39,380 --> 00:01:41,630 I'll show you why that is very important and just a little bit. 31 00:01:43,140 --> 00:01:44,670 The next one we're going to put in, what was it? 32 00:01:44,790 --> 00:01:45,290 Arabic. 33 00:01:47,420 --> 00:01:48,590 But the value of a car. 34 00:01:51,420 --> 00:01:52,660 And then finally, Cindy. 35 00:01:53,970 --> 00:01:55,450 But the value of ajai. 36 00:01:56,930 --> 00:02:00,740 Once we are done with the overall translate component in this entire widget, I'll show you how you 37 00:02:00,740 --> 00:02:05,600 can very easily add an additional languages if you want to add in another language, such as Spanish 38 00:02:05,600 --> 00:02:06,620 or Russian or whatever else. 39 00:02:06,950 --> 00:02:07,910 Very easy to do. 40 00:02:08,210 --> 00:02:09,050 I'll show you how to do that. 41 00:02:09,380 --> 00:02:10,760 Once we finish all this stuff up. 42 00:02:12,330 --> 00:02:15,900 We're going to take that list of options and provide it to our drop down component. 43 00:02:18,840 --> 00:02:23,940 Then after that, we're going to also make sure that we initialize a selected language piece of state. 44 00:02:25,190 --> 00:02:28,120 We're gonna pass that selected language down into the dropdown. 45 00:02:28,280 --> 00:02:31,360 Along with the on selection change callback as well. 46 00:02:33,560 --> 00:02:35,120 Will define that piece of state first. 47 00:02:35,930 --> 00:02:39,470 We'll call it language and set language. 48 00:02:42,440 --> 00:02:48,200 And by default, we'll provide an initial selection of the first language inside the options array. 49 00:02:49,700 --> 00:02:52,610 The default value for this will be options at zero. 50 00:02:52,730 --> 00:02:53,150 Like so. 51 00:02:55,680 --> 00:03:01,380 So we need to provide both the current selection and a callback to change the selection down into our 52 00:03:01,380 --> 00:03:02,320 dropdown component. 53 00:03:02,880 --> 00:03:07,290 Remember, the drop down component expects to receive these props with some very specific names. 54 00:03:08,130 --> 00:03:12,690 If we forget what those names are, we can always go backwards, the drop down component itself and 55 00:03:12,690 --> 00:03:19,110 just get a quick reminder that we are expected to provide a selected prop and on selected change prop 56 00:03:19,170 --> 00:03:19,610 as well. 57 00:03:21,700 --> 00:03:24,790 For us, we're going to say selected is going to be language. 58 00:03:26,190 --> 00:03:29,910 And on selected change will be set. 59 00:03:30,150 --> 00:03:30,720 Language. 60 00:03:35,330 --> 00:03:38,150 OK, so that should be enough to at least get something visible on the screen. 61 00:03:38,520 --> 00:03:42,560 Now, the last thing we have to do is go back over to our apt J.S. file and make sure that we show the 62 00:03:42,590 --> 00:03:46,010 translate component, the back inside of APJ s. 63 00:03:47,260 --> 00:03:49,730 Up at the very top, I'm going to import. 64 00:03:50,890 --> 00:03:52,390 Our new transit component. 65 00:03:58,530 --> 00:04:00,000 Then down inside the app component. 66 00:04:00,970 --> 00:04:04,970 I'm going to first clean up some the code that we just added in around toggling the dropdown. 67 00:04:05,250 --> 00:04:09,690 That was just a very quick demonstrations so you could understand why we needed to clean up that event 68 00:04:09,690 --> 00:04:10,200 handler. 69 00:04:10,660 --> 00:04:12,930 So I'm going to delete the show dropdown piece of state. 70 00:04:14,070 --> 00:04:15,330 I'm going to delete the button. 71 00:04:16,370 --> 00:04:19,820 And I'm also going to delete the dropdown we accreted inside of here for right now as well. 72 00:04:20,390 --> 00:04:21,080 And you know what? 73 00:04:21,410 --> 00:04:24,250 We also don't really need this selected piece of state anymore as well. 74 00:04:25,690 --> 00:04:26,880 We're just gonna turn it div. 75 00:04:27,840 --> 00:04:29,280 That shows translate inside. 76 00:04:31,860 --> 00:04:32,700 Let's save all this. 77 00:04:34,280 --> 00:04:35,170 I'll flip back over. 78 00:04:36,500 --> 00:04:41,270 And, oh, looks like we need to make one little update there, we never actually made the label of 79 00:04:41,270 --> 00:04:44,540 the dropdown a configurable prop, so we should update that. 80 00:04:44,840 --> 00:04:46,970 But more importantly, for right now, we do see a dropdown. 81 00:04:47,420 --> 00:04:51,530 I can select one of the different languages inside of here and I can still click outside of it to close 82 00:04:51,530 --> 00:04:52,340 the dropdown as well. 83 00:04:53,240 --> 00:04:54,470 So this is a good start. 84 00:04:54,500 --> 00:05:00,160 But certainly let's make sure that we do provide a label as a prop so that we're not always seeing selecta 85 00:05:00,170 --> 00:05:00,830 color right there. 86 00:05:01,720 --> 00:05:01,820 OK. 87 00:05:01,880 --> 00:05:03,410 So we'll take care of that in just a moment.