So just moving into a list and now let's import react first, let's import React from React module.
So one Syrian border reactor made reactor model, our next step is to create a functional component.
So now let's create a function, and it should be a contest function contest list.
It is basically an out of function and it is going to receive props that we are sending from our outdoor
genetics.
So and it does have to have a written statement, and its parent element is again going to be a mean
or perhaps a react fragment.
So you can have this as a parent, parent, class.
Now, the developer receiving from abroad, GSX, as you might see that we are sending people from abroad,
GSX component people so well just distraught and receive the people's birthday.
OK, so we are distorting our data.
Now it even needs to be exported out because it has been exported and right to export default.
List.
Now, move back into your written statement and let's create and populate our list component.
So what are you going to do?
What is going to map the data so people that map and each time one particular person is going to take
our data and it is going to show it to us?
So let's call it person.
And then again.
We're just.
Let's just return a statement and before we have done anything.
We have to restructure so much, a certain amount of data that is going to come from our data, the
GSX, So.
So if we just see a total genius element, we see that each it's an area of objects, right, and each
object has an ID, a name, age and image, so they have to structure all four of these.
The I.D., the name, the age and the image.
So let's just head back into a list or GSX.
And we just type Heidi name, age and image.
So here we have an image and this should be equal to.
People.
A person, because this person is getting our data.
Now inside the written statement will create an article.
And this article should have a T.
Which is going to be the I.D. because that is the only unique feature of our app, and we'll give it
a key and assign it I.D..
Because as you might see in our data, our each and every element is having a separate IED.
So moving to a less torturous and will give it a Kiribati last name of person.
And.
Inside the article will have certain other elements.
Let's just reformatted and inside the article will be having our image.
And guess what?
There's going to be sort of the image.
It is going to be an image, obviously.
So it'll just give her image as a source.
And an alternative name to it.
So what should we name it, perhaps person might be good.
OK, then after this, now we know that each and every image is having a certain name, right?
So let's rather than giving her name a person, let's give her just name.
OK, now that should be a self-loathing element.
Now we have saved the image of the source, an alternative name.
Now, after this, we're going to have a div that is going to hold the name as well as the H, because
as you might recall, there are just five.
We have people's age also.
So let's head back into a less dangerous and inside Death Valley.
Just let's close it OK, then agree to edge for the element to attack.
And first is going to contain a name, and the other part is going to contain the age of the person.
So it should be a paragraph element, I suppose.
OK, so will you at our age?
And after each is because they won the east Wimbledon after that age with a space in between.
So now we have completed the set up of our app.
Now it's time to add a certain amount of CSA stored.