OK, so now let's go ahead and show our data on the way.
So for that, we need to create another component, so I will create another component we can.
Of course, we're going to do it here, but likely the score is too long and we can try it like all
the code in one file.
That's not mandatory.
We can just create all the components.
So that's so easy and convenient.
All right.
So I will create another folder here.
So that would be a Speedtail.
The soapy style and inside.
No, I think I carried it on fire, but I need to create a fuller recipe.
We.
And in time, this will create a file that would be a recipe.
Maybe always big in the components with capital letters, so that's a futile thought.
Yes.
OK, now here we'll use our trick to import the snippet, the boilerplate code, and if we don't know
what it is, so you need to install an extension, which is to call E7 Snippets E7 separate search.
So when it is installed.
Let me just, first of all, go ahead and just show you sort of saying, we'll call that so conclusive
text.
So when I go here and I assure you this right here, this one is so react redux this this extension,
just please install.
It's really, really helpful and it prevents you from writing like being called repeatedly like price
or traits of many more times.
This prevents you from repeating yourself.
Let's go back.
And here, after installing that extension, what you need to do is just right out of sea.
And for me, for some reason, it doesn't work for me or you were to invoke, maybe this doesn't work
due to this.
Listen, so.
And if it doesn't work, just press control, shift B and then let s seven snippets of it and then press
out of see all that and then you'll get the good.
That's a good.
It doesn't have any of that.
It also doesn't have an hyphen.
OK.
But it also, I you name it.
Sophie.
Well, you name it.
As if we don't.
And here what we'll do is, first of all, we'll provide the last name of the day for that's a recipe
title.
And.
Last name, so that will be a recipe.
Style and so this will give each one, so I don't think we need to get any heading to the H1.
So that is just.
Recipe, Miles.
All right.
Now let's grab the data from the corner and let's show us inside of you way, right?
So for that, we need to just use the map function.
So.
Below the below, the form being creative and name it just to add to this is inside, this will map
now what is a map function?
I have already told you, I think, or if I have not just think that map function is like when you are
receiving an array, OK, then you're receiving an array, or if that isn't at a point when you map
there today.
So what you do is you take a look at each element of the array one by one.
Now we are getting an array like, let me show you inside the data.
What is that?
That is that there are, as you can see, what is returning.
It's an array.
So now what we do is we grab the array because in this area there are like 10, 20 or 30 so many recipes.
So from that, we have to like look at each of the recipe and take that image and title and everything.
But we have to look at the arrays elements a one by one.
We have to look at each array, eat, eat element of the body.
Before that, we use the map, we use the map function to map function is used to like one by look,
take a look at the elements of the array one by one.
So that's why we use the map function.
So that's why I'm using the map.
Now, I hope you understood.
What does the map mean?
Malfunction means?
So now I'll use.
Now I'll map the recipe.
This I map this where it is this this right here you can see this an array.
We assign the value as empty array, but after receiving that, it's an Audi will map this recipe.
Okay.
Let me just go down and just add a surprise dart map will use this and this is a JavaScript, so we'll
use it inside the Columbus store recipe.
Recipes dot map now this expects a function inside that inside that will be a function and it also received
it also requires a return.
So now we'll pass the recipe as an argument always like if that is the recipes.
So here it will be the editors, plural.
So it will be singular so that you need to keep in mind.
So had its recipe and there's a function.
And now we'll return because the return is very, like, very important.
So let me just check with the name.
So we'll use a tag to add the tag.
Now what to return, but how we will know what is the name?
So let me take you to the browser and let me show you how the data is.
You see, this is the date on which we are receiving.
OK?
Let me just close this.
Let me ask you this.
This is the idea.
OK, inside this idea, there are all elements.
So for example, if I go to the first one, oh, if I go to the first one.
So that is a recipe that the recipe element inside it.
So it contains and contains you all and the label label is the name label is the name of the dish image.
This image this contains you are into the image.
So there is an array.
I think that a surprise an.
Yeah.
With recipes, an array and it contains like different different elements inside it.
So there's an array inside inside this that an object and inside it, there's an attic.
OK, so this is what it is.
So now we got it.
So remember, label is the key word for the name of the dish, and image tag is the key word.
Father, you are into the so we'll be using label and image.
So don't forget about this now, and this is the recipe is the name of their attic.
Let's go back and let's start coding now what we want, actually.
So we want more from the recipe we want.
First of all, let me just pass by this recipe.
So it will be.
JavaScript only saw recipe, and then we'll pick up that idea with this recipe, is this all right?
So then we'll take up that address inside that the one, the recipe, the speedy and insert the recipe
we want, don't label.
Now what does the label label?
I told the label labels the name of the dish.
Let me just save it and let me see if the server is up and running.
It's up and running.
And let us just go back to the browser and see.
We have got that label.
We have got the names of all the recipes.
So that means our trick is working perfectly acceptable.
Very, very clear.
Now let's let us go and try to show the images and try to load this inside the recipe tag companionable
after this.
Now we want to display this all data inside the recipe tile component, not in the produce.
So I take up this, all right, take up this all and I just got it and pasted inside the recipe tile
below the H1, so it will be instant and will pass.
Props.
So it was possible recipe and.
And inside the app, gorgeous also, we'll call it what we'll do is we'll call that component, which
is a.
Is address.
Be.
If I selected from her book, it will provide me an alternate for that, I was waiting.
So I think it took a great time.
And so this was a prop, so recipe.
Would it be equal to?
Recipe.
And I hope I hope it quite important.
So why this day is it, I think I need to remove this tape.
This wouldn't make any sense.
What I can just be with no problem.
Let me just self this component.
And I hope there are no issues, no.
Problem.
Let me just save.
Do we got it imported or import work properly?
Yes.
Let's go back to the browser and check if it's working, it's working, but we are not able to get the
data.
Mango.
And we are just getting that a big deal, but not the data, why?
Let me go and check.
When we called or because they were not saying word, we have not saved, Richard mean, just save it
and go mark.
Yes, we are getting.
We don't want this reciprocal, of course, but we are getting the data coming to school.
And let me just bring this one out.
Out of.
And we just even deleted.
Why, why would we need this?
OK.
And we'll see even now if I go back.
We are saving was when we won the image also before image what will do.
It's really, really simple.
So.
Will.
Damage image tag.
Inside the source Waterville port is.
Same thing which we did for this.
I will just copy this and we'll pay students student's.
Maybe.
And remember, the key word for image was image not label will change it and image I hoped would be.
I.
Image and just save it.
But I have to go to the browser and check if that rolled out or not.
OK, we got the images of all the recipes.
That is so cool, but I need a styling.
I don't want images like this.
We'll get styling to all of this in the next video.