WEBVTT 0 00:00.120 --> 00:03.380 Alright guys, it's time for another challenge. 1 00:03.410 --> 00:08.190 And in this challenge you're going to be applying what you've learned about mapping components in React 2 00:08.520 --> 00:15.600 to create an emoji dictionary that looks beautiful and helps you in knowing what emojis actually 3 00:15.600 --> 00:16.280 mean. 4 00:16.290 --> 00:22.170 So it might be because I'm getting a bit old but I've come to realize that when people send me emojis 5 00:22.170 --> 00:27.620 on WhatsApp or Twitter, sometimes I don't actually know what it really means. 6 00:27.690 --> 00:32.300 So I searched online and I came across a website called emojimeanings.net 7 00:32.520 --> 00:38.890 and it has really long descriptions of what each of these emojis actually mean. 8 00:38.940 --> 00:45.330 And so you can actually paste in an emoji and decode what it is that young people are trying to say. 9 00:46.380 --> 00:51.610 So for example, did you know that there is a difference between this emoji and this emoji? 10 00:51.630 --> 00:57.110 I literally thought they were the same but if I study it closely, I guess this one looks more speeches 11 00:57.360 --> 00:59.470 and this one is more like, Wow!. 12 00:59.670 --> 01:05.980 So I had to look through this and I thought it'd be a great project to build for a challenge. 13 01:06.030 --> 01:10.260 So you're going to end up with something that looks beautifully styled because I've read it included 14 01:10.290 --> 01:16.710 a styles.css. Of course feel free to just completely scrap this and build your own styles if you 15 01:16.710 --> 01:17.670 want to. 16 01:17.850 --> 01:24.360 But the goal of this challenge is to use what you've learned about mapping components. 17 01:24.450 --> 01:32.460 So go ahead and grab hold of this code sandbox from the course resources and then go ahead and fork 18 01:32.550 --> 01:37.190 this sandbox to have your own copy. 19 01:37.270 --> 01:43.330 Now we've already set up some parts of the website including the repetitive parts that you're pretty 20 01:43.330 --> 01:44.470 used to already. 21 01:44.470 --> 01:50.490 So we've got our app component rendered from our index.js, in our index.html 22 01:50.500 --> 01:57.610 we've got a montserrat font that's being loaded in as well as the style sheet and our root div and 23 01:57.660 --> 02:03.370 our index.js etc. So to complete the challenge you don't actually need to touch the public folder 24 02:03.790 --> 02:12.790 but what you will need to do is take a look inside the app.js. Here we've got a number of components 25 02:12.790 --> 02:17.620 in here including some HTML elements that you might not have seen before. 26 02:18.190 --> 02:19.990 This is a really nice component 27 02:19.990 --> 02:24.120 whenever you want to create a dictionary-like website. 28 02:24.430 --> 02:26.710 So we've got a dictionary list, 29 02:26.770 --> 02:34.920 we've got a dictionary term and a dictionary detail element in use here. And if we go ahead and search 30 02:34.920 --> 02:41.790 for these in MDN, it has full descriptions on what each of these components actually do. 31 02:41.790 --> 02:46.500 But it's just a really nice way of organizing data that's related together. 32 02:47.130 --> 02:51.680 So for example in this case they've got a dictionary of the Cryptids of Cornwall, 33 02:51.690 --> 02:59.700 they've got each term and detail being paired together using these dt and dd tags which is kind 34 02:59.700 --> 03:05.460 of like the Javascript key value pair but it has a really nice structure and it's really well suited 35 03:05.520 --> 03:09.780 for our application such as our emojipedia. 36 03:09.780 --> 03:15.880 But you'll notice that this is a horrendously long bunch of each HTML that's just in here. 37 03:16.080 --> 03:26.580 And your job is to turn these dictionary terms into a separate component called entry so that way you'll 38 03:26.580 --> 03:35.910 be able to create each of these new emoji entries and be able to use props to pass over customizable 39 03:35.910 --> 03:41.830 things such as the actual emoji or the name of the emoji or the definition of the emoji. 40 03:41.940 --> 03:46.580 And if you look inside the emojipedia.js, I've already created a constant 41 03:46.620 --> 03:53.820 that is an array of Javascript objects each containing all of the properties that you'll need to be 42 03:53.820 --> 03:57.240 able to build a website that looks exactly like this. 43 03:58.140 --> 04:07.200 So the goal of this challenge is to be able to dynamically add new data to our emojipedia and then for 44 04:07.200 --> 04:11.520 our website to simply just update with the new data. 45 04:11.520 --> 04:18.540 So for example if I go ahead and insert a new entry for emoji, you can see that immediately without me 46 04:18.540 --> 04:27.660 having to write any more HTML, my map function is able to render this new card into my emojipedia. 47 04:27.720 --> 04:32.490 This is what you're looking to achieve and you're going to use what you've learned in the previous lessons 48 04:32.880 --> 04:37.620 about mapping and extracting components to achieve this. 49 04:37.920 --> 04:43.420 Have a think about how you would tackle this and pause the video now to complete the challenge. 50 04:43.710 --> 04:48.810 If you get stuck or if you just want to see the solution then head back over here to this video where 51 04:48.840 --> 04:52.090 I'll be waiting for you to walk through the solution together. 52 04:52.280 --> 04:53.580 So pause the video now 53 04:53.580 --> 04:59.840 and good luck. 54 05:00.180 --> 05:00.520 All right. 55 05:00.550 --> 05:08.320 So in this challenge, I've actually not broken up the steps into individual comments right? Because you 56 05:08.320 --> 05:12.470 already can see that this is the end outcome you're trying to achieve. 57 05:12.490 --> 05:15.950 So it's good practice to create your own steps anyways. 58 05:16.000 --> 05:18.510 Break down a large problem into smaller ones. 59 05:18.640 --> 05:21.180 So let's have a think about this. 60 05:21.250 --> 05:27.700 The first thing that will probably need to do is to create a separate entry component 61 05:27.700 --> 05:28.430 right? 62 05:28.570 --> 05:33.590 And this entry component is going to then need to get some props. 63 05:33.610 --> 05:40.180 So if we study through this HTML, we can see the part that repeats are each of these divs with a class 64 05:40.180 --> 05:41.530 name of term. 65 05:41.530 --> 05:44.540 You see that we've got three of these in here. 66 05:44.590 --> 05:49.220 So that is a perfect component to extract into our entry. 67 05:49.480 --> 05:56.200 And if we look at them, we can see the parts which are not repeating, so the parts which are not reusable 68 05:56.560 --> 06:02.380 are the actual emoji icon, the name of the emoji 69 06:02.500 --> 06:09.130 and the description of the emoji. So these are the three things that will probably need props to address. 70 06:09.130 --> 06:18.880 So step 2 is probably to create props to replace the hard coded data. 71 06:20.020 --> 06:20.260 All right. 72 06:20.290 --> 06:26.070 So once we've done that step then we should end up with three of these entry components 73 06:26.080 --> 06:26.680 right? 74 06:26.710 --> 06:33.430 Something that looks like this. And instead of having to add props to each of them and having to rewrite 75 06:33.460 --> 06:39.880 all of this again, it probably makes sense to use what we learned about mapping components to solve this 76 06:39.880 --> 06:40.770 problem for us. 77 06:40.780 --> 06:45.300 So we have to write less code and we can be more lazy and watch more Netflix. 78 06:45.370 --> 07:02.550 So step 3 is to map through the emojipedia array and render entry components. That will of course 79 07:02.580 --> 07:06.990 involve us getting hold of the emojipedia const in here 80 07:06.990 --> 07:11.950 which means we probably have to export it from this file and get it into our App 81 07:11.970 --> 07:16.190 .jsx. So there could be a small part of this 82 07:16.230 --> 07:19.310 step 3, maybe 3A. 83 07:19.380 --> 07:30.410 which is to simply import the emojipedia const. Sso that seems pretty much like it's achievable right? 84 07:30.410 --> 07:36.230 We've split it into smaller tasks that we can tackle individually and keep track of where we are in 85 07:36.230 --> 07:38.060 completing our challenge. 86 07:38.060 --> 07:40.210 Let's go ahead and tackle step 1 first. 87 07:40.640 --> 07:47.120 I'm going to create a new component called entry.jsx and inside entry, I'm going to add all of 88 07:47.120 --> 07:48.770 the normal boilerplate code. 89 07:52.760 --> 08:00.360 And inside my App.js, I of course have to import entry from entry. 90 08:00.650 --> 08:00.950 All right. 91 08:01.100 --> 08:07.180 Now the entry component is going to be the repeated part as we said of our dictionary 92 08:07.190 --> 08:07.520 right? 93 08:07.820 --> 08:14.900 So I'm going to take this entire div which has the class name of term which corresponds to each of these 94 08:15.530 --> 08:17.810 pieces or each of these cards. 95 08:17.840 --> 08:24.080 So let's go ahead and cut that out and put it into our entry. 96 08:24.090 --> 08:29.960 jsx so that's what we're going to be returning and hit save to get it to reformat. 97 08:29.960 --> 08:38.570 And now I'm going to delete all of the other two divs inside here but retain that dictionary list component 98 08:38.630 --> 08:39.920 that I have here. 99 08:39.950 --> 08:47.780 So let's go ahead and create a entry component and maybe let's just copy it three times. 100 08:47.780 --> 08:55.790 So now if we take a look at this in a new tab, we see that we've got three of the same thing right? 101 08:56.270 --> 09:04.860 But we have successfully extracted our entry component from our app component. So we can go ahead and 102 09:04.860 --> 09:06.880 delete step 1. 103 09:07.020 --> 09:13.950 Now step 2 involves creating the props to replace the hard coded data so we can actually make our 104 09:14.040 --> 09:20.970 entry component reusable and have different pieces of data being populated in each of these entries. 105 09:21.600 --> 09:27.160 So we can already identify the three things that need changing which are these three things. 106 09:27.180 --> 09:32.430 So let's go ahead and add some props where we create our entry. 107 09:32.430 --> 09:37.140 You can of course call your properties anything you like but make sure that it's something that actually 108 09:37.140 --> 09:38.050 makes sense. 109 09:38.070 --> 09:44.190 So I'll create one called the emoji and then I'll create another one which is going to be called the 110 09:44.190 --> 09:48.780 name and then the third one is going to be called the description. 111 09:49.650 --> 09:54.690 So these are the three props that I'm going to eventually have. And inside here 112 09:54.690 --> 10:01.500 I'm going to catch those props that I sent over when the entry component gets created and then render 113 10:01.500 --> 10:03.860 them inside each of these places. 114 10:03.870 --> 10:08.980 This one is going to become props.emoji 115 10:09.300 --> 10:13.380 and of course we have to wrap them inside a set of curly braces. 116 10:13.380 --> 10:23.990 And then this one inside the span is going to be props.name and finally this one is going to be 117 10:24.200 --> 10:26.570 props.description. 118 10:29.880 --> 10:30.250 All right. 119 10:30.250 --> 10:36.290 So now all we have to do is to actually send each of these pieces of data that we promised. 120 10:36.730 --> 10:39.280 I'm first going to use just some hard coded data. 121 10:39.310 --> 10:46.180 So I'm going to go into my emojipedia and copy each of these strings. 122 10:46.180 --> 10:48.960 So this is the emoji, 123 10:49.120 --> 10:51.090 this is the name 124 10:51.910 --> 10:56.740 and this is the description. 125 10:56.740 --> 10:59.060 So let's go ahead and put those in there. 126 10:59.230 --> 11:08.170 And now if we go ahead and take a look at our app, you'll see that we have three entries but only one 127 11:08.170 --> 11:14.910 of them actually has data because that's the only one that's actually getting props being sent over 128 11:15.280 --> 11:19.330 whereas both of these two don't have any props defined. 129 11:19.330 --> 11:25.240 So when it's trying to render an emoji or the title or the paragraph, none of that is there. 130 11:25.300 --> 11:31.210 So you can of course simply create three of these and update each of these pieces of data that you're 131 11:31.210 --> 11:33.160 sending over via the props. 132 11:33.160 --> 11:34.990 But that's kind of a pain. 133 11:35.020 --> 11:42.280 So we want to try to be lazy and instead we want to go ahead and import the emojipedia and map through 134 11:42.280 --> 11:44.740 it. Now that we're done with step 2 135 11:44.740 --> 11:46.320 let's go ahead and delete that. 136 11:46.570 --> 11:50.930 And step 3 starts off by importing the emojipedia. 137 11:51.400 --> 11:56.190 But remember that you can't import without first exporting. 138 11:56.290 --> 12:02.080 So that's not meant to be any sort of Buddhist Zen but it's actually just a practicality of getting 139 12:02.080 --> 12:04.600 hold of this constant, emojipedia. 140 12:05.020 --> 12:11.950 So inside this file emojipedia.js I'm going to export the constant as a default 141 12:11.950 --> 12:16.760 and it was called emojipedia. 142 12:16.930 --> 12:17.140 All right. 143 12:17.170 --> 12:27.730 So once I'm exporting then I can go back into my App.js, import emojipedia from ../emoji 144 12:27.760 --> 12:29.010 pedia. 145 12:29.110 --> 12:29.370 All right. 146 12:29.500 --> 12:35.380 So that's going to get us out of the components folder and into the parent folder, source and then get 147 12:35.380 --> 12:37.670 hold of that emojipedia file. 148 12:37.690 --> 12:44.370 So now I actually have access to this array called emojipedia. 149 12:45.240 --> 12:51.510 And if I log it you'll be able to see it inside the console right here. 150 12:51.520 --> 12:51.970 There we go. 151 12:52.120 --> 12:57.900 So we've got three objects each with four properties: id, emoji, name and meaning. 152 12:57.940 --> 13:02.080 And we're going to insert those into our React app. 153 13:02.350 --> 13:10.930 That's 3A completed and now on to 3B, to map through the emojipedia array and render the entry 154 13:10.930 --> 13:17.940 components. We saw in the last lesson how we can map through an array using the map function. 155 13:18.010 --> 13:25.650 So let's go ahead and delete all of our entry components and instead we're going to tap into that emoji 156 13:25.660 --> 13:30.460 pedia array and we're going to call the map function on it. 157 13:30.460 --> 13:36.370 And of course we have to wrap it inside a set of curly braces so that it's actually valid Javascript 158 13:36.370 --> 13:38.200 code. Up here 159 13:38.200 --> 13:46.840 I'm going to create a function called createEntry and this function is going to take a single entry 160 13:47.110 --> 13:57.250 from our emojipedia, so something like this. Let's call it a emojiTerm and for each of these emoji terms 161 13:57.340 --> 14:06.450 from our dictionary of emojis, we're going to create or return a entry component. 162 14:06.820 --> 14:13.180 And inside this entry component we're going to pass some props and the props that we are catching over 163 14:13.180 --> 14:17.820 here are the emoji, name and description. 164 14:17.950 --> 14:30.160 So let's go ahead and add a emoji, name and description. And remember that whenever we're using the map 165 14:30.160 --> 14:39.460 function to loop through an array to render React components, we also have to add a key prop that's expected 166 14:39.490 --> 14:40.460 by React 167 14:40.570 --> 14:44.570 so it can more efficiently render your components. 168 14:44.590 --> 14:50.530 Let's take a look through the emojipedia and see what each of these JavaScript objects actually have. 169 14:50.530 --> 14:53.930 We've got an id, an emoji name and meaning. 170 14:53.950 --> 14:57.520 So I want to map those to each of these props. 171 14:57.520 --> 15:03.400 And remember that I'm getting passed over a single Javascript object. For example 172 15:03.430 --> 15:04.700 this first one. 173 15:04.700 --> 15:11.110 So in fact I'm just going to copy it over here and put it down here and then just comment it out just 174 15:11.170 --> 15:12.580 for reference. 175 15:12.790 --> 15:23.530 So for the key I'm going to set it as the emojiTerm.id. And remember the curly braces. The emoji 176 15:23.560 --> 15:30.390 is going to be the emojiTerm.emoji. The name 177 15:33.520 --> 15:34.220 it's gonna be . 178 15:34.240 --> 15:37.100 name and the description 179 15:38.480 --> 15:40.540 is going to be the property called 180 15:40.540 --> 15:50.240 meaning. Now I've got my entry component being rendered for every single emoji term. 181 15:50.290 --> 15:56.380 So it's almost like as if we had a some sort of var emoji term equals 182 15:56.410 --> 15:58.990 this particular Javascript object 183 15:58.990 --> 16:06.490 and then we are passing in each of these properties as props to our entry component. In order to actually 184 16:06.490 --> 16:09.380 get hold of these emoji terms, 185 16:09.460 --> 16:15.490 we're going to pass this function createEntry into our map function right here. 186 16:15.640 --> 16:19.340 So let's pass it over here, creatEentry. 187 16:19.510 --> 16:26.380 And now if we take a look at our app, you can see it's pulling in that data dynamically from our emoji 188 16:26.380 --> 16:34.690 pedia and populating it to create as many entry components as we have items in our emojipedia which is 189 16:34.900 --> 16:36.470 just three. 190 16:36.610 --> 16:43.690 Now of course you can add as many or alter this as much as you like and pick out your favorite emojis 191 16:44.470 --> 16:51.100 from the emoji meanings website, but the goal of this challenge was to practice mapping components and 192 16:51.160 --> 16:59.680 extracting components as well as getting more familiar with props. If you got stuck during the challenge 193 16:59.770 --> 17:01.950 or there was something that you couldn't figure out 194 17:02.080 --> 17:03.640 but now you've watched the solution 195 17:03.640 --> 17:05.420 things should be a lot more clear. 196 17:05.470 --> 17:10.990 So if you didn't manage to complete the challenge, be sure to head back and do it by yourself without 197 17:10.990 --> 17:12.370 the video this time 198 17:12.370 --> 17:18.830 after seeing how it's done. In the next lesson, we're gonna be looking at some of the other methods that 199 17:18.830 --> 17:22.400 are commonly used in React to manipulate arrays. 200 17:22.400 --> 17:28.340 So in addition to a deep dive on map, we're also going to be looking at filter and reduce. 201 17:28.340 --> 17:30.800 So for all of that and more, I'll see you there.