So now we have configured most of the pieces of our app, but the missing piece of the equation is that
emoji results, right?
We want to render something onto us for that purpose.
We are in agreement government of state.
So now that's what we do will be creating state into application and integrating it.
So now just above your render method will be creating a state.
So let's just create a state.
And it is going to be an entity.
It is going to be an object and keep it in a state is going to be.
Altered images now we have two options, either we can assign it to us, for example.
Let me just close off all the other ones.
OK, so we have now two options, either going to sign this filtered images to and that immediately
or and later map on all the images that are in there.
But that might not be something that one can call a wise decision because if we see around the emoji
list or JSON file, there is not hundreds but thousands of files in here.
You might see that there is about 9000 total images and not all languages, but they are really a great
many of them images.
So we do not want them to be rendered completely.
We do not want them to be rendered rendered like all of them in the van.
So we're referring them.
And for that purpose, we have made another component.
As you might recall in the images folder, we had this emoji filter that is going to do the filtering
for us.
So let's just call this filter over here.
And in the future, those videos will be calling about immediately adjacent and filtering it and returning
it to us.
So let's just call a filter.
And before we pass any arguments to it, let's just imported in our approaches so we will be importing
filter.
And the location is in the dashboard.
Inside the dashboard, we have the images column.
And inside the images, we have certain ideas.
So we have imported our filter, and all of it is going to take up two arguments.
One is going to be an empty string and that is going to be the maximum number of emojis that we want
to be displaying a.
So initially, you want only 20 of them to be displayed.
So let's just be it.
OK, so we have failed them a third goal, and now let's go into a filter method and resolve, I felt
outrageous.
So if we just move into a filtered audience.
So now we're moving into political death now, the first thing that will do is important images list.
So that's what we'll do.
Let's import emoji list.
And in the same territory, so just one space back and will be getting an image of Lester Jason.
OK, so we have imported energy less now is the time to create a functional component.
So let's just create a functional component name at Filter.
And it will be taking up two parameters.
One is the search text.
Which is going to be used when we are going to enable the search option in our app.
Other than this, where we are also having the max and the massive number of reserves that we want to
be displaying on us now, we want to explore this function.
So let's just export filter.
So now it is going to have a red incident, right?
So let's just give it a statement.
And this written statement is going to return emojis.
Emoji list and we're going to filter out whatever it is in it.
So we got to filter it out now once we have filtered it, what we want from a filter is that it is going
to take up one emoji per day.
So and then an arrow function.
Then the first condition is going to be, uh, let me just tap the command, then I'll explain what
is happening in it.
So now what is happening is that if we want to target, if you don't tighten and will be converting
it into lowercase includes, that means if we have a search tax and that includes what is in our title,
for example, includes a search text that we are receiving from our AdWords and that was supposed to
be converted into law cases.
If this condition is true, then we want to return true and we want to return that particular emoji.
So let's just return to.
And if that is not the case in any other scenario, you just want to return funds.
So this is a primary.
OK, I just forgot the true keyboard over there.
We won't return.
True.
OK, so the ask you what what it says that if we just move into an emoji, let's draw Jason.
And you see that everybody has a particular title, so that means if any use is stepping up that they
want the postal home, then we should show them the postal home right now.
If we just go back into a filter or Jason Ritter, Roger, sorry, if he just going, we see that we
have images of Title two lowercase.
That means we want it to be converted into lowercase and it should include.
That means whatever we typing on us, for example, if I just go back into Abdul G.S..
For example, if I'm just it like in that case, hon.
It has, I think, for at home.
Then whole might show up like the postal home, the mental toll.
Now all these functions showing, but area of concern is the postal handle.
So this is just showing up, right?
So this is because it contains the title and it is included in our search text.
Therefore, this is showing.
Now, why are these other elements showing?
Because they contain the keyword, haunting them like you might see the horn in the smileys and metal
contains a horn metal tone.
One contains a horn and all of them contains on.
So now let's just go back into it, but it makes logic.
But what I just showed you is a complete version of our app now if I just implement what we have now.
So now we have Max Reserve, but now what we want to do is we want to return it.
But I want to use this slide function of JavaScript.
So we'll just slice it because we want only 20 numbers to be displayed, right?
So zero.
And that should be equal to max results.
And again, there's going to be a semicolon.
Now I'd.
So this is that initial fatal.
Right?
Let's move back into it.
Abdul GSX if you just move into Abdul.
So now this radar function is going to return all of us to elements of our emoji list.
So if we just take a look at that emoji list, the first 20 images are going to be displayed.
That means the on a topless we're going to have this one.
Let me just go right to the top.
We're going to have this under this one to three for this grinning face, this grimacing face and all
the first 20 elements.
So initially, will this being the first 20 elements because displaying all the elements might not be
a good idea in the starting now, as we have added state, we are going to add to do so that we can
display everything on Earth.
So now let's add the emoji results right beneath our search bar.
So we'll be adding emoji results, OK, and passing it data.