1
00:00:00,450 --> 00:00:04,000
OK, so now let's go ahead and show our data on the way.

2
00:00:04,050 --> 00:00:07,970
So for that, we need to create another component, so I will create another component we can.

3
00:00:08,040 --> 00:00:13,830
Of course, we're going to do it here, but likely the score is too long and we can try it like all

4
00:00:13,830 --> 00:00:14,640
the code in one file.

5
00:00:14,640 --> 00:00:15,780
That's not mandatory.

6
00:00:15,780 --> 00:00:17,310
We can just create all the components.

7
00:00:17,310 --> 00:00:18,840
So that's so easy and convenient.

8
00:00:19,290 --> 00:00:19,680
All right.

9
00:00:19,680 --> 00:00:21,440
So I will create another folder here.

10
00:00:21,450 --> 00:00:23,250
So that would be a Speedtail.

11
00:00:24,920 --> 00:00:28,160
The soapy style and inside.

12
00:00:30,020 --> 00:00:36,410
No, I think I carried it on fire, but I need to create a fuller recipe.

13
00:00:37,340 --> 00:00:37,730
We.

14
00:00:38,930 --> 00:00:46,460
And in time, this will create a file that would be a recipe.

15
00:00:48,550 --> 00:00:54,370
Maybe always big in the components with capital letters, so that's a futile thought.

16
00:00:54,550 --> 00:00:55,060
Yes.

17
00:00:56,230 --> 00:01:04,000
OK, now here we'll use our trick to import the snippet, the boilerplate code, and if we don't know

18
00:01:04,000 --> 00:01:10,870
what it is, so you need to install an extension, which is to call E7 Snippets E7 separate search.

19
00:01:11,200 --> 00:01:12,760
So when it is installed.

20
00:01:12,790 --> 00:01:19,270
Let me just, first of all, go ahead and just show you sort of saying, we'll call that so conclusive

21
00:01:19,270 --> 00:01:19,900
text.

22
00:01:21,230 --> 00:01:28,040
So when I go here and I assure you this right here, this one is so react redux this this extension,

23
00:01:28,040 --> 00:01:29,850
just please install.

24
00:01:29,910 --> 00:01:36,380
It's really, really helpful and it prevents you from writing like being called repeatedly like price

25
00:01:36,380 --> 00:01:37,940
or traits of many more times.

26
00:01:38,300 --> 00:01:41,120
This prevents you from repeating yourself.

27
00:01:42,200 --> 00:01:42,950
Let's go back.

28
00:01:43,980 --> 00:01:50,040
And here, after installing that extension, what you need to do is just right out of sea.

29
00:01:50,670 --> 00:01:56,970
And for me, for some reason, it doesn't work for me or you were to invoke, maybe this doesn't work

30
00:01:56,970 --> 00:01:57,570
due to this.

31
00:01:58,180 --> 00:01:59,340
Listen, so.

32
00:02:02,680 --> 00:02:09,420
And if it doesn't work, just press control, shift B and then let s seven snippets of it and then press

33
00:02:09,460 --> 00:02:14,060
out of see all that and then you'll get the good.

34
00:02:14,620 --> 00:02:14,970
That's a good.

35
00:02:15,190 --> 00:02:18,130
It doesn't have any of that.

36
00:02:18,820 --> 00:02:20,680
It also doesn't have an hyphen.

37
00:02:21,640 --> 00:02:22,100
OK.

38
00:02:22,900 --> 00:02:24,520
But it also, I you name it.

39
00:02:26,350 --> 00:02:26,920
Sophie.

40
00:02:32,460 --> 00:02:33,550
Well, you name it.

41
00:02:36,600 --> 00:02:37,750
As if we don't.

42
00:02:42,820 --> 00:02:50,830
And here what we'll do is, first of all, we'll provide the last name of the day for that's a recipe

43
00:02:50,830 --> 00:02:51,110
title.

44
00:02:52,330 --> 00:02:53,140
And.

45
00:02:56,420 --> 00:03:00,440
Last name, so that will be a recipe.

46
00:03:02,640 --> 00:03:11,720
Style and so this will give each one, so I don't think we need to get any heading to the H1.

47
00:03:13,950 --> 00:03:14,790
So that is just.

48
00:03:17,680 --> 00:03:19,520
Recipe, Miles.

49
00:03:20,580 --> 00:03:21,060
All right.

50
00:03:22,580 --> 00:03:29,520
Now let's grab the data from the corner and let's show us inside of you way, right?

51
00:03:29,980 --> 00:03:34,050
So for that, we need to just use the map function.

52
00:03:34,460 --> 00:03:35,010
So.

53
00:03:36,210 --> 00:03:46,800
Below the below, the form being creative and name it just to add to this is inside, this will map

54
00:03:47,190 --> 00:03:49,040
now what is a map function?

55
00:03:49,050 --> 00:03:57,300
I have already told you, I think, or if I have not just think that map function is like when you are

56
00:03:57,300 --> 00:04:02,700
receiving an array, OK, then you're receiving an array, or if that isn't at a point when you map

57
00:04:02,700 --> 00:04:03,270
there today.

58
00:04:03,570 --> 00:04:08,190
So what you do is you take a look at each element of the array one by one.

59
00:04:08,460 --> 00:04:12,490
Now we are getting an array like, let me show you inside the data.

60
00:04:12,960 --> 00:04:13,710
What is that?

61
00:04:14,100 --> 00:04:17,100
That is that there are, as you can see, what is returning.

62
00:04:17,340 --> 00:04:18,000
It's an array.

63
00:04:18,510 --> 00:04:25,590
So now what we do is we grab the array because in this area there are like 10, 20 or 30 so many recipes.

64
00:04:25,860 --> 00:04:33,120
So from that, we have to like look at each of the recipe and take that image and title and everything.

65
00:04:33,330 --> 00:04:36,900
But we have to look at the arrays elements a one by one.

66
00:04:37,350 --> 00:04:41,510
We have to look at each array, eat, eat element of the body.

67
00:04:41,850 --> 00:04:48,320
Before that, we use the map, we use the map function to map function is used to like one by look,

68
00:04:48,330 --> 00:04:51,030
take a look at the elements of the array one by one.

69
00:04:51,300 --> 00:04:53,030
So that's why we use the map function.

70
00:04:53,050 --> 00:04:54,720
So that's why I'm using the map.

71
00:04:55,140 --> 00:04:56,400
Now, I hope you understood.

72
00:04:57,270 --> 00:04:58,470
What does the map mean?

73
00:04:58,530 --> 00:04:59,460
Malfunction means?

74
00:04:59,970 --> 00:05:01,380
So now I'll use.

75
00:05:01,770 --> 00:05:04,500
Now I'll map the recipe.

76
00:05:07,020 --> 00:05:14,910
This I map this where it is this this right here you can see this an array.

77
00:05:15,480 --> 00:05:21,530
We assign the value as empty array, but after receiving that, it's an Audi will map this recipe.

78
00:05:21,990 --> 00:05:22,280
Okay.

79
00:05:22,320 --> 00:05:29,250
Let me just go down and just add a surprise dart map will use this and this is a JavaScript, so we'll

80
00:05:29,250 --> 00:05:32,430
use it inside the Columbus store recipe.

81
00:05:36,160 --> 00:05:45,850
Recipes dot map now this expects a function inside that inside that will be a function and it also received

82
00:05:45,850 --> 00:05:47,510
it also requires a return.

83
00:05:47,590 --> 00:05:53,920
So now we'll pass the recipe as an argument always like if that is the recipes.

84
00:05:54,010 --> 00:05:56,050
So here it will be the editors, plural.

85
00:05:56,410 --> 00:05:59,160
So it will be singular so that you need to keep in mind.

86
00:05:59,410 --> 00:06:04,330
So had its recipe and there's a function.

87
00:06:04,750 --> 00:06:09,760
And now we'll return because the return is very, like, very important.

88
00:06:09,760 --> 00:06:12,970
So let me just check with the name.

89
00:06:13,270 --> 00:06:17,850
So we'll use a tag to add the tag.

90
00:06:17,860 --> 00:06:20,740
Now what to return, but how we will know what is the name?

91
00:06:21,310 --> 00:06:26,560
So let me take you to the browser and let me show you how the data is.

92
00:06:27,100 --> 00:06:29,430
You see, this is the date on which we are receiving.

93
00:06:29,440 --> 00:06:29,770
OK?

94
00:06:30,100 --> 00:06:31,160
Let me just close this.

95
00:06:31,180 --> 00:06:32,020
Let me ask you this.

96
00:06:32,320 --> 00:06:33,210
This is the idea.

97
00:06:33,340 --> 00:06:37,000
OK, inside this idea, there are all elements.

98
00:06:37,570 --> 00:06:42,700
So for example, if I go to the first one, oh, if I go to the first one.

99
00:06:43,060 --> 00:06:47,500
So that is a recipe that the recipe element inside it.

100
00:06:47,800 --> 00:06:56,620
So it contains and contains you all and the label label is the name label is the name of the dish image.

101
00:06:56,650 --> 00:07:00,490
This image this contains you are into the image.

102
00:07:00,890 --> 00:07:02,140
So there is an array.

103
00:07:03,600 --> 00:07:04,650
I think that a surprise an.

104
00:07:06,570 --> 00:07:06,820
Yeah.

105
00:07:07,230 --> 00:07:12,020
With recipes, an array and it contains like different different elements inside it.

106
00:07:12,370 --> 00:07:19,590
So there's an array inside inside this that an object and inside it, there's an attic.

107
00:07:19,840 --> 00:07:21,900
OK, so this is what it is.

108
00:07:22,020 --> 00:07:23,700
So now we got it.

109
00:07:23,940 --> 00:07:31,200
So remember, label is the key word for the name of the dish, and image tag is the key word.

110
00:07:31,200 --> 00:07:35,070
Father, you are into the so we'll be using label and image.

111
00:07:35,160 --> 00:07:40,050
So don't forget about this now, and this is the recipe is the name of their attic.

112
00:07:40,410 --> 00:07:45,600
Let's go back and let's start coding now what we want, actually.

113
00:07:46,530 --> 00:07:50,270
So we want more from the recipe we want.

114
00:07:51,100 --> 00:07:53,760
First of all, let me just pass by this recipe.

115
00:07:54,870 --> 00:07:56,130
So it will be.

116
00:07:58,110 --> 00:08:06,590
JavaScript only saw recipe, and then we'll pick up that idea with this recipe, is this all right?

117
00:08:06,950 --> 00:08:13,730
So then we'll take up that address inside that the one, the recipe, the speedy and insert the recipe

118
00:08:13,940 --> 00:08:15,530
we want, don't label.

119
00:08:15,860 --> 00:08:16,960
Now what does the label label?

120
00:08:16,970 --> 00:08:18,740
I told the label labels the name of the dish.

121
00:08:19,190 --> 00:08:23,930
Let me just save it and let me see if the server is up and running.

122
00:08:24,590 --> 00:08:25,700
It's up and running.

123
00:08:26,060 --> 00:08:28,940
And let us just go back to the browser and see.

124
00:08:29,390 --> 00:08:31,090
We have got that label.

125
00:08:31,100 --> 00:08:33,620
We have got the names of all the recipes.

126
00:08:34,010 --> 00:08:37,480
So that means our trick is working perfectly acceptable.

127
00:08:37,490 --> 00:08:38,240
Very, very clear.

128
00:08:38,540 --> 00:08:47,950
Now let's let us go and try to show the images and try to load this inside the recipe tag companionable

129
00:08:47,960 --> 00:08:48,710
after this.

130
00:08:50,010 --> 00:08:56,510
Now we want to display this all data inside the recipe tile component, not in the produce.

131
00:08:56,880 --> 00:09:04,140
So I take up this, all right, take up this all and I just got it and pasted inside the recipe tile

132
00:09:04,140 --> 00:09:12,210
below the H1, so it will be instant and will pass.

133
00:09:13,250 --> 00:09:13,650
Props.

134
00:09:14,030 --> 00:09:18,260
So it was possible recipe and.

135
00:09:21,460 --> 00:09:29,500
And inside the app, gorgeous also, we'll call it what we'll do is we'll call that component, which

136
00:09:29,500 --> 00:09:30,050
is a.

137
00:09:33,820 --> 00:09:35,470
Is address.

138
00:09:39,040 --> 00:09:39,460
Be.

139
00:09:44,060 --> 00:09:49,740
If I selected from her book, it will provide me an alternate for that, I was waiting.

140
00:09:50,060 --> 00:09:51,950
So I think it took a great time.

141
00:09:53,640 --> 00:09:58,320
And so this was a prop, so recipe.

142
00:09:59,070 --> 00:10:00,180
Would it be equal to?

143
00:10:03,380 --> 00:10:03,880
Recipe.

144
00:10:08,860 --> 00:10:13,030
And I hope I hope it quite important.

145
00:10:13,780 --> 00:10:17,290
So why this day is it, I think I need to remove this tape.

146
00:10:18,810 --> 00:10:19,920
This wouldn't make any sense.

147
00:10:23,850 --> 00:10:25,800
What I can just be with no problem.

148
00:10:26,190 --> 00:10:28,200
Let me just self this component.

149
00:10:29,390 --> 00:10:31,940
And I hope there are no issues, no.

150
00:10:34,530 --> 00:10:35,030
Problem.

151
00:10:36,340 --> 00:10:37,150
Let me just save.

152
00:10:39,910 --> 00:10:43,100
Do we got it imported or import work properly?

153
00:10:43,120 --> 00:10:43,710
Yes.

154
00:10:43,810 --> 00:10:53,320
Let's go back to the browser and check if it's working, it's working, but we are not able to get the

155
00:10:53,320 --> 00:10:54,070
data.

156
00:10:55,600 --> 00:10:56,470
Mango.

157
00:10:58,720 --> 00:11:03,460
And we are just getting that a big deal, but not the data, why?

158
00:11:03,520 --> 00:11:05,020
Let me go and check.

159
00:11:06,010 --> 00:11:10,850
When we called or because they were not saying word, we have not saved, Richard mean, just save it

160
00:11:11,570 --> 00:11:13,990
and go mark.

161
00:11:14,060 --> 00:11:15,710
Yes, we are getting.

162
00:11:16,430 --> 00:11:21,950
We don't want this reciprocal, of course, but we are getting the data coming to school.

163
00:11:23,070 --> 00:11:26,720
And let me just bring this one out.

164
00:11:27,940 --> 00:11:28,690
Out of.

165
00:11:30,100 --> 00:11:31,810
And we just even deleted.

166
00:11:32,140 --> 00:11:33,610
Why, why would we need this?

167
00:11:34,820 --> 00:11:35,300
OK.

168
00:11:37,220 --> 00:11:40,370
And we'll see even now if I go back.

169
00:11:42,070 --> 00:11:46,990
We are saving was when we won the image also before image what will do.

170
00:11:48,010 --> 00:11:50,080
It's really, really simple.

171
00:11:50,410 --> 00:11:50,890
So.

172
00:11:52,010 --> 00:11:52,580
Will.

173
00:11:54,320 --> 00:11:55,490
Damage image tag.

174
00:11:57,640 --> 00:12:00,600
Inside the source Waterville port is.

175
00:12:05,030 --> 00:12:07,320
Same thing which we did for this.

176
00:12:07,350 --> 00:12:11,910
I will just copy this and we'll pay students student's.

177
00:12:13,380 --> 00:12:13,890
Maybe.

178
00:12:16,000 --> 00:12:24,730
And remember, the key word for image was image not label will change it and image I hoped would be.

179
00:12:25,780 --> 00:12:26,200
I.

180
00:12:27,530 --> 00:12:29,330
Image and just save it.

181
00:12:30,590 --> 00:12:34,010
But I have to go to the browser and check if that rolled out or not.

182
00:12:34,700 --> 00:12:37,910
OK, we got the images of all the recipes.

183
00:12:38,370 --> 00:12:42,910
That is so cool, but I need a styling.

184
00:12:42,920 --> 00:12:44,840
I don't want images like this.

185
00:12:47,250 --> 00:12:50,640
We'll get styling to all of this in the next video.