Alright guys, it's time for another challenge.
And in this challenge you're going to be applying what you've learned about mapping components in React
to create an emoji dictionary that looks beautiful and helps you in knowing what emojis actually
mean.
So it might be because I'm getting a bit old but I've come to realize that when people send me emojis
on WhatsApp or Twitter, sometimes I don't actually know what it really means.
So I searched online and I came across a website called emojimeanings.net
and it has really long descriptions of what each of these emojis actually mean.
And so you can actually paste in an emoji and decode what it is that young people are trying to say.
So for example, did you know that there is a difference between this emoji and this emoji?
I literally thought they were the same but if I study it closely, I guess this one looks more speeches
and this one is more like, Wow!.
So I had to look through this and I thought it'd be a great project to build for a challenge.
So you're going to end up with something that looks beautifully styled because I've read it included
a styles.css. Of course feel free to just completely scrap this and build your own styles if you
want to.
But the goal of this challenge is to use what you've learned about mapping components.
So go ahead and grab hold of this code sandbox from the course resources and then go ahead and fork
this sandbox to have your own copy.
Now we've already set up some parts of the website including the repetitive parts that you're pretty
used to already.
So we've got our app component rendered from our index.js, in our index.html
we've got a montserrat font that's being loaded in as well as the style sheet and our root div and
our index.js etc. So to complete the challenge you don't actually need to touch the public folder
but what you will need to do is take a look inside the app.js. Here we've got a number of components
in here including some HTML elements that you might not have seen before.
This is a really nice component
whenever you want to create a dictionary-like website.
So we've got a dictionary list,
we've got a dictionary term and a dictionary detail element in use here. And if we go ahead and search
for these in MDN, it has full descriptions on what each of these components actually do.
But it's just a really nice way of organizing data that's related together.
So for example in this case they've got a dictionary of the Cryptids of Cornwall,
they've got each term and detail being paired together using these dt and dd tags which is kind
of like the Javascript key value pair but it has a really nice structure and it's really well suited
for our application such as our emojipedia.
But you'll notice that this is a horrendously long bunch of each HTML that's just in here.
And your job is to turn these dictionary terms into a separate component called entry so that way you'll
be able to create each of these new emoji entries and be able to use props to pass over customizable
things such as the actual emoji or the name of the emoji or the definition of the emoji.
And if you look inside the emojipedia.js, I've already created a constant
that is an array of Javascript objects each containing all of the properties that you'll need to be
able to build a website that looks exactly like this.
So the goal of this challenge is to be able to dynamically add new data to our emojipedia and then for
our website to simply just update with the new data.
So for example if I go ahead and insert a new entry for emoji, you can see that immediately without me
having to write any more HTML, my map function is able to render this new card into my emojipedia.
This is what you're looking to achieve and you're going to use what you've learned in the previous lessons
about mapping and extracting components to achieve this.
Have a think about how you would tackle this and pause the video now to complete the challenge.
If you get stuck or if you just want to see the solution then head back over here to this video where
I'll be waiting for you to walk through the solution together.
So pause the video now
and good luck.
All right.
So in this challenge, I've actually not broken up the steps into individual comments right? Because you
already can see that this is the end outcome you're trying to achieve.
So it's good practice to create your own steps anyways.
Break down a large problem into smaller ones.
So let's have a think about this.
The first thing that will probably need to do is to create a separate entry component
right?
And this entry component is going to then need to get some props.
So if we study through this HTML, we can see the part that repeats are each of these divs with a class
name of term.
You see that we've got three of these in here.
So that is a perfect component to extract into our entry.
And if we look at them, we can see the parts which are not repeating, so the parts which are not reusable
are the actual emoji icon, the name of the emoji
and the description of the emoji. So these are the three things that will probably need props to address.
So step 2 is probably to create props to replace the hard coded data.
All right.
So once we've done that step then we should end up with three of these entry components
right?
Something that looks like this. And instead of having to add props to each of them and having to rewrite
all of this again, it probably makes sense to use what we learned about mapping components to solve this
problem for us.
So we have to write less code and we can be more lazy and watch more Netflix.
So step 3 is to map through the emojipedia array and render entry components. That will of course
involve us getting hold of the emojipedia const in here
which means we probably have to export it from this file and get it into our App
.jsx. So there could be a small part of this
step 3, maybe 3A.
which is to simply import the emojipedia const. Sso that seems pretty much like it's achievable right?
We've split it into smaller tasks that we can tackle individually and keep track of where we are in
completing our challenge.
Let's go ahead and tackle step 1 first.
I'm going to create a new component called entry.jsx and inside entry, I'm going to add all of
the normal boilerplate code.
And inside my App.js, I of course have to import entry from entry.
All right.
Now the entry component is going to be the repeated part as we said of our dictionary
right?
So I'm going to take this entire div which has the class name of term which corresponds to each of these
pieces or each of these cards.
So let's go ahead and cut that out and put it into our entry.
jsx so that's what we're going to be returning and hit save to get it to reformat.
And now I'm going to delete all of the other two divs inside here but retain that dictionary list component
that I have here.
So let's go ahead and create a entry component and maybe let's just copy it three times.
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?
But we have successfully extracted our entry component from our app component. So we can go ahead and
delete step 1.
Now step 2 involves creating the props to replace the hard coded data so we can actually make our
entry component reusable and have different pieces of data being populated in each of these entries.
So we can already identify the three things that need changing which are these three things.
So let's go ahead and add some props where we create our entry.
You can of course call your properties anything you like but make sure that it's something that actually
makes sense.
So I'll create one called the emoji and then I'll create another one which is going to be called the
name and then the third one is going to be called the description.
So these are the three props that I'm going to eventually have. And inside here
I'm going to catch those props that I sent over when the entry component gets created and then render
them inside each of these places.
This one is going to become props.emoji
and of course we have to wrap them inside a set of curly braces.
And then this one inside the span is going to be props.name and finally this one is going to be
props.description.
All right.
So now all we have to do is to actually send each of these pieces of data that we promised.
I'm first going to use just some hard coded data.
So I'm going to go into my emojipedia and copy each of these strings.
So this is the emoji,
this is the name
and this is the description.
So let's go ahead and put those in there.
And now if we go ahead and take a look at our app, you'll see that we have three entries but only one
of them actually has data because that's the only one that's actually getting props being sent over
whereas both of these two don't have any props defined.
So when it's trying to render an emoji or the title or the paragraph, none of that is there.
So you can of course simply create three of these and update each of these pieces of data that you're
sending over via the props.
But that's kind of a pain.
So we want to try to be lazy and instead we want to go ahead and import the emojipedia and map through
it. Now that we're done with step 2
let's go ahead and delete that.
And step 3 starts off by importing the emojipedia.
But remember that you can't import without first exporting.
So that's not meant to be any sort of Buddhist Zen but it's actually just a practicality of getting
hold of this constant, emojipedia.
So inside this file emojipedia.js I'm going to export the constant as a default
and it was called emojipedia.
All right.
So once I'm exporting then I can go back into my App.js, import emojipedia from ../emoji
pedia.
All right.
So that's going to get us out of the components folder and into the parent folder, source and then get
hold of that emojipedia file.
So now I actually have access to this array called emojipedia.
And if I log it you'll be able to see it inside the console right here.
There we go.
So we've got three objects each with four properties: id, emoji, name and meaning.
And we're going to insert those into our React app.
That's 3A completed and now on to 3B, to map through the emojipedia array and render the entry
components. We saw in the last lesson how we can map through an array using the map function.
So let's go ahead and delete all of our entry components and instead we're going to tap into that emoji
pedia array and we're going to call the map function on it.
And of course we have to wrap it inside a set of curly braces so that it's actually valid Javascript
code. Up here
I'm going to create a function called createEntry and this function is going to take a single entry
from our emojipedia, so something like this. Let's call it a emojiTerm and for each of these emoji terms
from our dictionary of emojis, we're going to create or return a entry component.
And inside this entry component we're going to pass some props and the props that we are catching over
here are the emoji, name and description.
So let's go ahead and add a emoji, name and description. And remember that whenever we're using the map
function to loop through an array to render React components, we also have to add a key prop that's expected
by React
so it can more efficiently render your components.
Let's take a look through the emojipedia and see what each of these JavaScript objects actually have.
We've got an id, an emoji name and meaning.
So I want to map those to each of these props.
And remember that I'm getting passed over a single Javascript object. For example
this first one.
So in fact I'm just going to copy it over here and put it down here and then just comment it out just
for reference.
So for the key I'm going to set it as the emojiTerm.id. And remember the curly braces. The emoji
is going to be the emojiTerm.emoji. The name
it's gonna be .
name and the description
is going to be the property called
meaning. Now I've got my entry component being rendered for every single emoji term.
So it's almost like as if we had a some sort of var emoji term equals
this particular Javascript object
and then we are passing in each of these properties as props to our entry component. In order to actually
get hold of these emoji terms,
we're going to pass this function createEntry into our map function right here.
So let's pass it over here, creatEentry.
And now if we take a look at our app, you can see it's pulling in that data dynamically from our emoji
pedia and populating it to create as many entry components as we have items in our emojipedia which is
just three.
Now of course you can add as many or alter this as much as you like and pick out your favorite emojis
from the emoji meanings website, but the goal of this challenge was to practice mapping components and
extracting components as well as getting more familiar with props. If you got stuck during the challenge
or there was something that you couldn't figure out
but now you've watched the solution
things should be a lot more clear.
So if you didn't manage to complete the challenge, be sure to head back and do it by yourself without
the video this time
after seeing how it's done. In the next lesson, we're gonna be looking at some of the other methods that
are commonly used in React to manipulate arrays.
So in addition to a deep dive on map, we're also going to be looking at filter and reduce.
So for all of that and more, I'll see you there.