1 00:00:00,330 --> 00:00:07,020 So just moving into a list and now let's import react first, let's import React from React module. 2 00:00:10,870 --> 00:00:15,190 So one Syrian border reactor made reactor model, our next step is to create a functional component. 3 00:00:17,230 --> 00:00:22,960 So now let's create a function, and it should be a contest function contest list. 4 00:00:25,060 --> 00:00:30,400 It is basically an out of function and it is going to receive props that we are sending from our outdoor 5 00:00:30,420 --> 00:00:30,970 genetics. 6 00:00:32,090 --> 00:00:40,240 So and it does have to have a written statement, and its parent element is again going to be a mean 7 00:00:40,840 --> 00:00:42,340 or perhaps a react fragment. 8 00:00:45,690 --> 00:00:49,020 So you can have this as a parent, parent, class. 9 00:00:50,150 --> 00:00:58,810 Now, the developer receiving from abroad, GSX, as you might see that we are sending people from abroad, 10 00:00:58,820 --> 00:01:04,670 GSX component people so well just distraught and receive the people's birthday. 11 00:01:09,390 --> 00:01:10,980 OK, so we are distorting our data. 12 00:01:11,280 --> 00:01:16,500 Now it even needs to be exported out because it has been exported and right to export default. 13 00:01:20,450 --> 00:01:20,900 List. 14 00:01:24,360 --> 00:01:31,260 Now, move back into your written statement and let's create and populate our list component. 15 00:01:31,740 --> 00:01:32,640 So what are you going to do? 16 00:01:32,870 --> 00:01:41,190 What is going to map the data so people that map and each time one particular person is going to take 17 00:01:41,190 --> 00:01:43,710 our data and it is going to show it to us? 18 00:01:46,010 --> 00:01:47,240 So let's call it person. 19 00:01:47,810 --> 00:01:49,160 And then again. 20 00:01:50,250 --> 00:01:50,970 We're just. 21 00:01:53,650 --> 00:01:59,320 Let's just return a statement and before we have done anything. 22 00:02:05,530 --> 00:02:10,900 We have to restructure so much, a certain amount of data that is going to come from our data, the 23 00:02:10,910 --> 00:02:11,650 GSX, So. 24 00:02:13,390 --> 00:02:20,410 So if we just see a total genius element, we see that each it's an area of objects, right, and each 25 00:02:20,410 --> 00:02:25,030 object has an ID, a name, age and image, so they have to structure all four of these. 26 00:02:25,060 --> 00:02:26,950 The I.D., the name, the age and the image. 27 00:02:27,490 --> 00:02:30,970 So let's just head back into a list or GSX. 28 00:02:31,540 --> 00:02:34,990 And we just type Heidi name, age and image. 29 00:02:38,200 --> 00:02:41,770 So here we have an image and this should be equal to. 30 00:02:43,820 --> 00:02:44,240 People. 31 00:02:45,400 --> 00:02:48,580 A person, because this person is getting our data. 32 00:02:50,220 --> 00:02:53,220 Now inside the written statement will create an article. 33 00:02:56,150 --> 00:02:58,520 And this article should have a T. 34 00:03:00,310 --> 00:03:07,150 Which is going to be the I.D. because that is the only unique feature of our app, and we'll give it 35 00:03:07,150 --> 00:03:09,220 a key and assign it I.D.. 36 00:03:10,600 --> 00:03:17,020 Because as you might see in our data, our each and every element is having a separate IED. 37 00:03:18,600 --> 00:03:23,610 So moving to a less torturous and will give it a Kiribati last name of person. 38 00:03:30,220 --> 00:03:30,880 And. 39 00:03:32,510 --> 00:03:35,300 Inside the article will have certain other elements. 40 00:03:35,490 --> 00:03:39,170 Let's just reformatted and inside the article will be having our image. 41 00:03:40,160 --> 00:03:41,240 And guess what? 42 00:03:41,540 --> 00:03:42,980 There's going to be sort of the image. 43 00:03:43,640 --> 00:03:46,100 It is going to be an image, obviously. 44 00:03:46,520 --> 00:03:48,680 So it'll just give her image as a source. 45 00:03:51,020 --> 00:03:53,030 And an alternative name to it. 46 00:03:53,330 --> 00:03:58,850 So what should we name it, perhaps person might be good. 47 00:04:00,240 --> 00:04:07,140 OK, then after this, now we know that each and every image is having a certain name, right? 48 00:04:07,140 --> 00:04:10,140 So let's rather than giving her name a person, let's give her just name. 49 00:04:10,710 --> 00:04:12,990 OK, now that should be a self-loathing element. 50 00:04:13,030 --> 00:04:16,020 Now we have saved the image of the source, an alternative name. 51 00:04:16,680 --> 00:04:23,640 Now, after this, we're going to have a div that is going to hold the name as well as the H, because 52 00:04:23,640 --> 00:04:26,250 as you might recall, there are just five. 53 00:04:26,580 --> 00:04:28,620 We have people's age also. 54 00:04:29,100 --> 00:04:33,000 So let's head back into a less dangerous and inside Death Valley. 55 00:04:33,000 --> 00:04:39,110 Just let's close it OK, then agree to edge for the element to attack. 56 00:04:39,720 --> 00:04:45,510 And first is going to contain a name, and the other part is going to contain the age of the person. 57 00:04:46,050 --> 00:04:48,630 So it should be a paragraph element, I suppose. 58 00:04:49,300 --> 00:04:51,030 OK, so will you at our age? 59 00:04:52,370 --> 00:04:58,100 And after each is because they won the east Wimbledon after that age with a space in between. 60 00:04:59,420 --> 00:05:03,110 So now we have completed the set up of our app. 61 00:05:03,350 --> 00:05:07,430 Now it's time to add a certain amount of CSA stored.