1
00:00:00,850 --> 00:00:05,460
So now we have configured most of the pieces of our app, but the missing piece of the equation is that

2
00:00:05,470 --> 00:00:06,490
emoji results, right?

3
00:00:07,150 --> 00:00:11,710
We want to render something onto us for that purpose.

4
00:00:11,740 --> 00:00:13,780
We are in agreement government of state.

5
00:00:14,110 --> 00:00:18,580
So now that's what we do will be creating state into application and integrating it.

6
00:00:19,120 --> 00:00:23,410
So now just above your render method will be creating a state.

7
00:00:23,890 --> 00:00:25,270
So let's just create a state.

8
00:00:25,750 --> 00:00:27,030
And it is going to be an entity.

9
00:00:27,190 --> 00:00:31,180
It is going to be an object and keep it in a state is going to be.

10
00:00:33,670 --> 00:00:40,690
Altered images now we have two options, either we can assign it to us, for example.

11
00:00:40,840 --> 00:00:42,760
Let me just close off all the other ones.

12
00:00:50,280 --> 00:00:54,960
OK, so we have now two options, either going to sign this filtered images to and that immediately

13
00:00:55,140 --> 00:00:58,860
or and later map on all the images that are in there.

14
00:00:58,860 --> 00:01:05,610
But that might not be something that one can call a wise decision because if we see around the emoji

15
00:01:05,610 --> 00:01:10,310
list or JSON file, there is not hundreds but thousands of files in here.

16
00:01:10,320 --> 00:01:17,880
You might see that there is about 9000 total images and not all languages, but they are really a great

17
00:01:17,880 --> 00:01:19,760
many of them images.

18
00:01:19,770 --> 00:01:22,290
So we do not want them to be rendered completely.

19
00:01:22,800 --> 00:01:27,150
We do not want them to be rendered rendered like all of them in the van.

20
00:01:27,150 --> 00:01:28,290
So we're referring them.

21
00:01:28,560 --> 00:01:31,140
And for that purpose, we have made another component.

22
00:01:31,140 --> 00:01:40,020
As you might recall in the images folder, we had this emoji filter that is going to do the filtering

23
00:01:40,030 --> 00:01:40,410
for us.

24
00:01:40,410 --> 00:01:42,600
So let's just call this filter over here.

25
00:01:42,600 --> 00:01:47,640
And in the future, those videos will be calling about immediately adjacent and filtering it and returning

26
00:01:47,640 --> 00:01:48,140
it to us.

27
00:01:48,930 --> 00:01:51,360
So let's just call a filter.

28
00:01:52,020 --> 00:02:00,360
And before we pass any arguments to it, let's just imported in our approaches so we will be importing

29
00:02:00,360 --> 00:02:00,810
filter.

30
00:02:03,770 --> 00:02:05,660
And the location is in the dashboard.

31
00:02:11,160 --> 00:02:13,350
Inside the dashboard, we have the images column.

32
00:02:16,570 --> 00:02:19,390
And inside the images, we have certain ideas.

33
00:02:19,750 --> 00:02:23,320
So we have imported our filter, and all of it is going to take up two arguments.

34
00:02:24,070 --> 00:02:31,090
One is going to be an empty string and that is going to be the maximum number of emojis that we want

35
00:02:31,090 --> 00:02:32,140
to be displaying a.

36
00:02:32,770 --> 00:02:35,170
So initially, you want only 20 of them to be displayed.

37
00:02:37,000 --> 00:02:38,500
So let's just be it.

38
00:02:41,340 --> 00:02:46,620
OK, so we have failed them a third goal, and now let's go into a filter method and resolve, I felt

39
00:02:46,650 --> 00:02:47,280
outrageous.

40
00:02:48,090 --> 00:02:50,430
So if we just move into a filtered audience.

41
00:03:10,950 --> 00:03:15,510
So now we're moving into political death now, the first thing that will do is important images list.

42
00:03:16,080 --> 00:03:17,250
So that's what we'll do.

43
00:03:17,250 --> 00:03:18,840
Let's import emoji list.

44
00:03:23,990 --> 00:03:28,670
And in the same territory, so just one space back and will be getting an image of Lester Jason.

45
00:03:29,450 --> 00:03:33,150
OK, so we have imported energy less now is the time to create a functional component.

46
00:03:33,530 --> 00:03:37,910
So let's just create a functional component name at Filter.

47
00:03:39,780 --> 00:03:41,520
And it will be taking up two parameters.

48
00:03:41,730 --> 00:03:43,050
One is the search text.

49
00:03:45,620 --> 00:03:50,660
Which is going to be used when we are going to enable the search option in our app.

50
00:03:51,500 --> 00:03:56,840
Other than this, where we are also having the max and the massive number of reserves that we want to

51
00:03:56,840 --> 00:04:00,800
be displaying on us now, we want to explore this function.

52
00:04:00,800 --> 00:04:02,450
So let's just export filter.

53
00:04:06,920 --> 00:04:09,170
So now it is going to have a red incident, right?

54
00:04:09,410 --> 00:04:11,390
So let's just give it a statement.

55
00:04:12,710 --> 00:04:17,350
And this written statement is going to return emojis.

56
00:04:17,600 --> 00:04:22,190
Emoji list and we're going to filter out whatever it is in it.

57
00:04:22,580 --> 00:04:28,400
So we got to filter it out now once we have filtered it, what we want from a filter is that it is going

58
00:04:28,400 --> 00:04:30,470
to take up one emoji per day.

59
00:04:31,550 --> 00:04:33,440
So and then an arrow function.

60
00:04:35,060 --> 00:04:40,550
Then the first condition is going to be, uh, let me just tap the command, then I'll explain what

61
00:04:40,550 --> 00:04:41,210
is happening in it.

62
00:04:51,850 --> 00:04:57,220
So now what is happening is that if we want to target, if you don't tighten and will be converting

63
00:04:57,220 --> 00:05:04,390
it into lowercase includes, that means if we have a search tax and that includes what is in our title,

64
00:05:04,870 --> 00:05:12,270
for example, includes a search text that we are receiving from our AdWords and that was supposed to

65
00:05:12,280 --> 00:05:14,950
be converted into law cases.

66
00:05:15,550 --> 00:05:21,210
If this condition is true, then we want to return true and we want to return that particular emoji.

67
00:05:22,500 --> 00:05:24,270
So let's just return to.

68
00:05:25,460 --> 00:05:29,840
And if that is not the case in any other scenario, you just want to return funds.

69
00:05:32,070 --> 00:05:33,670
So this is a primary.

70
00:05:33,690 --> 00:05:35,840
OK, I just forgot the true keyboard over there.

71
00:05:36,700 --> 00:05:37,620
We won't return.

72
00:05:38,910 --> 00:05:39,180
True.

73
00:05:40,620 --> 00:05:46,410
OK, so the ask you what what it says that if we just move into an emoji, let's draw Jason.

74
00:05:48,230 --> 00:05:53,300
And you see that everybody has a particular title, so that means if any use is stepping up that they

75
00:05:53,300 --> 00:05:57,470
want the postal home, then we should show them the postal home right now.

76
00:05:58,450 --> 00:06:04,660
If we just go back into a filter or Jason Ritter, Roger, sorry, if he just going, we see that we

77
00:06:04,660 --> 00:06:06,100
have images of Title two lowercase.

78
00:06:06,100 --> 00:06:10,210
That means we want it to be converted into lowercase and it should include.

79
00:06:10,450 --> 00:06:16,030
That means whatever we typing on us, for example, if I just go back into Abdul G.S..

80
00:06:17,210 --> 00:06:20,510
For example, if I'm just it like in that case, hon.

81
00:06:29,010 --> 00:06:30,150
It has, I think, for at home.

82
00:06:35,310 --> 00:06:38,610
Then whole might show up like the postal home, the mental toll.

83
00:06:38,970 --> 00:06:43,440
Now all these functions showing, but area of concern is the postal handle.

84
00:06:44,100 --> 00:06:45,420
So this is just showing up, right?

85
00:06:45,660 --> 00:06:50,100
So this is because it contains the title and it is included in our search text.

86
00:06:50,100 --> 00:06:51,060
Therefore, this is showing.

87
00:06:51,330 --> 00:06:53,550
Now, why are these other elements showing?

88
00:06:53,700 --> 00:07:00,450
Because they contain the keyword, haunting them like you might see the horn in the smileys and metal

89
00:07:00,450 --> 00:07:01,680
contains a horn metal tone.

90
00:07:01,680 --> 00:07:03,780
One contains a horn and all of them contains on.

91
00:07:04,290 --> 00:07:08,240
So now let's just go back into it, but it makes logic.

92
00:07:08,820 --> 00:07:15,090
But what I just showed you is a complete version of our app now if I just implement what we have now.

93
00:07:15,720 --> 00:07:20,250
So now we have Max Reserve, but now what we want to do is we want to return it.

94
00:07:20,520 --> 00:07:22,560
But I want to use this slide function of JavaScript.

95
00:07:22,560 --> 00:07:26,310
So we'll just slice it because we want only 20 numbers to be displayed, right?

96
00:07:26,730 --> 00:07:27,390
So zero.

97
00:07:27,390 --> 00:07:29,850
And that should be equal to max results.

98
00:07:31,320 --> 00:07:33,440
And again, there's going to be a semicolon.

99
00:07:33,730 --> 00:07:34,080
Now I'd.

100
00:07:34,980 --> 00:07:36,310
So this is that initial fatal.

101
00:07:36,780 --> 00:07:37,080
Right?

102
00:07:37,440 --> 00:07:38,310
Let's move back into it.

103
00:07:38,310 --> 00:07:41,550
Abdul GSX if you just move into Abdul.

104
00:07:42,210 --> 00:07:47,600
So now this radar function is going to return all of us to elements of our emoji list.

105
00:07:47,610 --> 00:07:53,100
So if we just take a look at that emoji list, the first 20 images are going to be displayed.

106
00:07:53,100 --> 00:07:55,650
That means the on a topless we're going to have this one.

107
00:07:57,000 --> 00:07:58,010
Let me just go right to the top.

108
00:07:58,020 --> 00:08:02,340
We're going to have this under this one to three for this grinning face, this grimacing face and all

109
00:08:02,340 --> 00:08:03,390
the first 20 elements.

110
00:08:03,810 --> 00:08:08,040
So initially, will this being the first 20 elements because displaying all the elements might not be

111
00:08:08,040 --> 00:08:14,340
a good idea in the starting now, as we have added state, we are going to add to do so that we can

112
00:08:14,340 --> 00:08:15,810
display everything on Earth.

113
00:08:16,470 --> 00:08:20,220
So now let's add the emoji results right beneath our search bar.

114
00:08:20,670 --> 00:08:25,380
So we'll be adding emoji results, OK, and passing it data.