Alright guys, it's time for another challenge. 1
And in this challenge you're going to be applying what you've learned about mapping components in React 2
to create an emoji dictionary that looks beautiful and helps you in knowing what emojis actually 3
mean. 4
So it might be because I'm getting a bit old but I've come to realize that when people send me emojis 5
on WhatsApp or Twitter, sometimes I don't actually know what it really means. 6
So I searched online and I came across a website called emojimeanings.net 7
and it has really long descriptions of what each of these emojis actually mean. 8
And so you can actually paste in an emoji and decode what it is that young people are trying to say. 9
So for example, did you know that there is a difference between this emoji and this emoji? 10
I literally thought they were the same but if I study it closely, I guess this one looks more speeches 11
and this one is more like, Wow!. 12
So I had to look through this and I thought it'd be a great project to build for a challenge. 13
So you're going to end up with something that looks beautifully styled because I've read it included 14
a styles.css. Of course feel free to just completely scrap this and build your own styles if you 15
want to. 16
But the goal of this challenge is to use what you've learned about mapping components. 17
So go ahead and grab hold of this code sandbox from the course resources and then go ahead and fork 18
this sandbox to have your own copy. 19
Now we've already set up some parts of the website including the repetitive parts that you're pretty 20
used to already. 21
So we've got our app component rendered from our index.js, in our index.html 22
we've got a montserrat font that's being loaded in as well as the style sheet and our root div and 23
our index.js etc. So to complete the challenge you don't actually need to touch the public folder 24
but what you will need to do is take a look inside the app.js. Here we've got a number of components 25
in here including some HTML elements that you might not have seen before. 26
This is a really nice component 27
whenever you want to create a dictionary-like website. 28
So we've got a dictionary list, 29
we've got a dictionary term and a dictionary detail element in use here. And if we go ahead and search 30
for these in MDN, it has full descriptions on what each of these components actually do. 31
But it's just a really nice way of organizing data that's related together. 32
So for example in this case they've got a dictionary of the Cryptids of Cornwall, 33
they've got each term and detail being paired together using these dt and dd tags which is kind 34
of like the Javascript key value pair but it has a really nice structure and it's really well suited 35
for our application such as our emojipedia. 36
But you'll notice that this is a horrendously long bunch of each HTML that's just in here. 37
And your job is to turn these dictionary terms into a separate component called entry so that way you'll 38
be able to create each of these new emoji entries and be able to use props to pass over customizable 39
things such as the actual emoji or the name of the emoji or the definition of the emoji. 40
And if you look inside the emojipedia.js, I've already created a constant 41
that is an array of Javascript objects each containing all of the properties that you'll need to be 42
able to build a website that looks exactly like this. 43
So the goal of this challenge is to be able to dynamically add new data to our emojipedia and then for 44
our website to simply just update with the new data. 45
So for example if I go ahead and insert a new entry for emoji, you can see that immediately without me 46
having to write any more HTML, my map function is able to render this new card into my emojipedia. 47
This is what you're looking to achieve and you're going to use what you've learned in the previous lessons 48
about mapping and extracting components to achieve this. 49
Have a think about how you would tackle this and pause the video now to complete the challenge. 50
If you get stuck or if you just want to see the solution then head back over here to this video where 51
I'll be waiting for you to walk through the solution together. 52
So pause the video now 53
and good luck. 54
All right. 55
So in this challenge, I've actually not broken up the steps into individual comments right? Because you 56
already can see that this is the end outcome you're trying to achieve. 57
So it's good practice to create your own steps anyways. 58
Break down a large problem into smaller ones. 59
So let's have a think about this. 60
The first thing that will probably need to do is to create a separate entry component 61
right? 62
And this entry component is going to then need to get some props. 63
So if we study through this HTML, we can see the part that repeats are each of these divs with a class 64
name of term. 65
You see that we've got three of these in here. 66
So that is a perfect component to extract into our entry. 67
And if we look at them, we can see the parts which are not repeating, so the parts which are not reusable 68
are the actual emoji icon, the name of the emoji 69
and the description of the emoji. So these are the three things that will probably need props to address. 70
So step 2 is probably to create props to replace the hard coded data. 71
All right. 72
So once we've done that step then we should end up with three of these entry components 73
right? 74
Something that looks like this. And instead of having to add props to each of them and having to rewrite 75
all of this again, it probably makes sense to use what we learned about mapping components to solve this 76
problem for us. 77
So we have to write less code and we can be more lazy and watch more Netflix. 78
So step 3 is to map through the emojipedia array and render entry components. That will of course 79
involve us getting hold of the emojipedia const in here 80
which means we probably have to export it from this file and get it into our App 81
.jsx. So there could be a small part of this 82
step 3, maybe 3A. 83
which is to simply import the emojipedia const. Sso that seems pretty much like it's achievable right? 84
We've split it into smaller tasks that we can tackle individually and keep track of where we are in 85
completing our challenge. 86
Let's go ahead and tackle step 1 first. 87
I'm going to create a new component called entry.jsx and inside entry, I'm going to add all of 88
the normal boilerplate code. 89
And inside my App.js, I of course have to import entry from entry. 90
All right. 91
Now the entry component is going to be the repeated part as we said of our dictionary 92
right? 93
So I'm going to take this entire div which has the class name of term which corresponds to each of these 94
pieces or each of these cards. 95
So let's go ahead and cut that out and put it into our entry. 96
jsx so that's what we're going to be returning and hit save to get it to reformat. 97
And now I'm going to delete all of the other two divs inside here but retain that dictionary list component 98
that I have here. 99
So let's go ahead and create a entry component and maybe let's just copy it three times. 100
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
But we have successfully extracted our entry component from our app component. So we can go ahead and 102
delete step 1. 103
Now step 2 involves creating the props to replace the hard coded data so we can actually make our 104
entry component reusable and have different pieces of data being populated in each of these entries. 105
So we can already identify the three things that need changing which are these three things. 106
So let's go ahead and add some props where we create our entry. 107
You can of course call your properties anything you like but make sure that it's something that actually 108
makes sense. 109
So I'll create one called the emoji and then I'll create another one which is going to be called the 110
name and then the third one is going to be called the description. 111
So these are the three props that I'm going to eventually have. And inside here 112
I'm going to catch those props that I sent over when the entry component gets created and then render 113
them inside each of these places. 114
This one is going to become props.emoji 115
and of course we have to wrap them inside a set of curly braces. 116
And then this one inside the span is going to be props.name and finally this one is going to be 117
props.description. 118
All right. 119
So now all we have to do is to actually send each of these pieces of data that we promised. 120
I'm first going to use just some hard coded data. 121
So I'm going to go into my emojipedia and copy each of these strings. 122
So this is the emoji, 123
this is the name 124
and this is the description. 125
So let's go ahead and put those in there. 126
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
of them actually has data because that's the only one that's actually getting props being sent over 128
whereas both of these two don't have any props defined. 129
So when it's trying to render an emoji or the title or the paragraph, none of that is there. 130
So you can of course simply create three of these and update each of these pieces of data that you're 131
sending over via the props. 132
But that's kind of a pain. 133
So we want to try to be lazy and instead we want to go ahead and import the emojipedia and map through 134
it. Now that we're done with step 2 135
let's go ahead and delete that. 136
And step 3 starts off by importing the emojipedia. 137
But remember that you can't import without first exporting. 138
So that's not meant to be any sort of Buddhist Zen but it's actually just a practicality of getting 139
hold of this constant, emojipedia. 140
So inside this file emojipedia.js I'm going to export the constant as a default 141
and it was called emojipedia. 142
All right. 143
So once I'm exporting then I can go back into my App.js, import emojipedia from ../emoji 144
pedia. 145
All right. 146
So that's going to get us out of the components folder and into the parent folder, source and then get 147
hold of that emojipedia file. 148
So now I actually have access to this array called emojipedia. 149
And if I log it you'll be able to see it inside the console right here. 150
There we go. 151
So we've got three objects each with four properties: id, emoji, name and meaning. 152
And we're going to insert those into our React app. 153
That's 3A completed and now on to 3B, to map through the emojipedia array and render the entry 154
components. We saw in the last lesson how we can map through an array using the map function. 155
So let's go ahead and delete all of our entry components and instead we're going to tap into that emoji 156
pedia array and we're going to call the map function on it. 157
And of course we have to wrap it inside a set of curly braces so that it's actually valid Javascript 158
code. Up here 159
I'm going to create a function called createEntry and this function is going to take a single entry 160
from our emojipedia, so something like this. Let's call it a emojiTerm and for each of these emoji terms 161
from our dictionary of emojis, we're going to create or return a entry component. 162
And inside this entry component we're going to pass some props and the props that we are catching over 163
here are the emoji, name and description. 164
So let's go ahead and add a emoji, name and description. And remember that whenever we're using the map 165
function to loop through an array to render React components, we also have to add a key prop that's expected 166
by React 167
so it can more efficiently render your components. 168
Let's take a look through the emojipedia and see what each of these JavaScript objects actually have. 169
We've got an id, an emoji name and meaning. 170
So I want to map those to each of these props. 171
And remember that I'm getting passed over a single Javascript object. For example 172
this first one. 173
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
for reference. 175
So for the key I'm going to set it as the emojiTerm.id. And remember the curly braces. The emoji 176
is going to be the emojiTerm.emoji. The name 177
it's gonna be . 178
name and the description 179
is going to be the property called 180
meaning. Now I've got my entry component being rendered for every single emoji term. 181
So it's almost like as if we had a some sort of var emoji term equals 182
this particular Javascript object 183
and then we are passing in each of these properties as props to our entry component. In order to actually 184
get hold of these emoji terms, 185
we're going to pass this function createEntry into our map function right here. 186
So let's pass it over here, creatEentry. 187
And now if we take a look at our app, you can see it's pulling in that data dynamically from our emoji 188
pedia and populating it to create as many entry components as we have items in our emojipedia which is 189
just three. 190
Now of course you can add as many or alter this as much as you like and pick out your favorite emojis 191
from the emoji meanings website, but the goal of this challenge was to practice mapping components and 192
extracting components as well as getting more familiar with props. If you got stuck during the challenge 193
or there was something that you couldn't figure out 194
but now you've watched the solution 195
things should be a lot more clear. 196
So if you didn't manage to complete the challenge, be sure to head back and do it by yourself without 197
the video this time 198
after seeing how it's done. In the next lesson, we're gonna be looking at some of the other methods that 199
are commonly used in React to manipulate arrays. 200
So in addition to a deep dive on map, we're also going to be looking at filter and reduce. 201
So for all of that and more, I'll see you there.