1 00:00:00,180 --> 00:00:00,790 Nicely done. 2 00:00:00,810 --> 00:00:07,680 And once we've got our static data out of the way now, of course, and let's make this project a bit 3 00:00:07,680 --> 00:00:13,920 more interesting, where I would want to set up some kind of street value that set up our default value 4 00:00:13,920 --> 00:00:14,940 with our data. 5 00:00:15,240 --> 00:00:21,540 So a list of people and then, of course, puts it into a list, iterate over it, and then eventually 6 00:00:21,540 --> 00:00:27,030 also make this button work where at the moment it is just logging. 7 00:00:27,300 --> 00:00:30,530 You click me and I think I'm going to start with state value. 8 00:00:30,720 --> 00:00:35,580 So I'm going to go here with and people and then set. 9 00:00:36,410 --> 00:00:43,910 People, and that is equal to my state and as far as the default data, well, I'm just going to pass 10 00:00:43,910 --> 00:00:48,440 in data that I'm getting back from the data file. 11 00:00:48,860 --> 00:00:50,510 So I pass it in. 12 00:00:50,750 --> 00:00:56,600 And I know I already covered this a bit before, but I have my data, Jaspal, in here. 13 00:00:56,600 --> 00:01:02,030 I have my array of objects and then each represent that particular person. 14 00:01:02,390 --> 00:01:08,870 You'll also notice of the syntax where notice how I did not name this array. 15 00:01:09,260 --> 00:01:15,620 Normally prior to that we always did something like this where we have either a function or some kind 16 00:01:15,620 --> 00:01:22,610 of array or object or whatever, and then either we are going with named export or if we're setting 17 00:01:22,610 --> 00:01:26,990 up export default, we do it right after where we go with export default. 18 00:01:27,170 --> 00:01:34,190 And then, of course, the other way we can do that is by simply writing export default and then whatever 19 00:01:34,190 --> 00:01:35,290 we're going to be exporting. 20 00:01:35,420 --> 00:01:38,710 Please keep in mind that both of them do exactly the same thing. 21 00:01:39,610 --> 00:01:46,550 Where when we import, of course, we can come up with our own name in my I have this data just like 22 00:01:46,550 --> 00:01:52,450 the file, but this is also possible where if you know that you're exporting as default and by the way, 23 00:01:52,660 --> 00:01:53,820 this is only for default. 24 00:01:54,040 --> 00:01:56,500 So you cannot do that with name export. 25 00:01:56,830 --> 00:01:57,700 With name export. 26 00:01:57,720 --> 00:02:01,980 Yes, of course, you would need to set up as a variable when you're setting up a default one. 27 00:02:01,990 --> 00:02:06,080 Yes, you can do it where you go, export default and then whatever you're exporting. 28 00:02:06,340 --> 00:02:11,470 Now, I'm not the biggest fan of this particular setup, so I'm just showing you that that is possible. 29 00:02:11,830 --> 00:02:16,780 But in most cases, you won't see me using this type of syntax. 30 00:02:17,000 --> 00:02:20,440 So we have our right now that is my default value. 31 00:02:20,740 --> 00:02:26,590 And you can probably already guess that since I have this list, I will pass it in. 32 00:02:26,630 --> 00:02:27,970 So I'll say here, people. 33 00:02:29,000 --> 00:02:32,510 And that is, of course, equal to my people state. 34 00:02:33,170 --> 00:02:37,620 So I'm setting up people are equal to my people state. 35 00:02:38,270 --> 00:02:44,470 And before we move on to a list, one thing that I could do here and adding three is check. 36 00:02:44,480 --> 00:02:46,520 Well, how big is my list? 37 00:02:46,520 --> 00:02:46,970 Correct. 38 00:02:47,270 --> 00:02:52,780 And I can do that by going for people and length since I know it isn't right. 39 00:02:53,090 --> 00:02:56,640 And so I save you'll see that I have five birthdays. 40 00:02:56,660 --> 00:02:57,020 Why? 41 00:02:57,290 --> 00:03:00,380 Well, because my list has five items. 42 00:03:00,660 --> 00:03:01,460 You would have to. 43 00:03:01,670 --> 00:03:05,900 Then of course, it's going to say to you, if you have three thousand, then of course you can already 44 00:03:05,900 --> 00:03:11,150 guess that the birthdays text is going to have three thousand here. 45 00:03:11,660 --> 00:03:17,190 And once we are somewhat done in our address, we just need to clear the list eventually. 46 00:03:17,520 --> 00:03:24,110 Then of course, I would want to navigate to my list component and then in here I need to deal with 47 00:03:24,110 --> 00:03:29,750 that people and all the structured right away and the function parameter. 48 00:03:30,170 --> 00:03:33,020 I'm going to say that I'm looking for my people. 49 00:03:33,680 --> 00:03:36,210 And now, of course, I would just want to iterate over. 50 00:03:36,530 --> 00:03:41,930 Now I will leave the fragment, but I'll delete the hearing too, and I'll say people. 51 00:03:42,200 --> 00:03:43,870 So that is, of course, my problem. 52 00:03:44,120 --> 00:03:46,700 And I have my my method now. 53 00:03:46,730 --> 00:03:50,990 I will set up a perimeter here with the name of person. 54 00:03:51,440 --> 00:03:54,260 So that will represent each and every object. 55 00:03:54,560 --> 00:04:02,060 And then since I know that in the data, the properties for each and every object are ID, name, age 56 00:04:02,060 --> 00:04:06,230 and image, all the structure right away because I think it's going to be faster. 57 00:04:06,470 --> 00:04:15,290 So I'm going to go here with Consed and then I'm looking for ID, I'm looking for name age as well as 58 00:04:15,290 --> 00:04:15,830 the image. 59 00:04:15,830 --> 00:04:23,930 So that is coming from the person and need decide on my return and what I would want is the article. 60 00:04:24,200 --> 00:04:27,520 So I'm returning the article and then let's add right away. 61 00:04:28,310 --> 00:04:30,450 So this is where we'll use that idea. 62 00:04:30,830 --> 00:04:32,900 Now also, let's add a little bit of styling. 63 00:04:33,140 --> 00:04:41,810 So here a person class and inside the article, we're going to go with an image now, of course, for 64 00:04:41,810 --> 00:04:42,470 the source. 65 00:04:42,470 --> 00:04:48,200 I will use my image properly then for the alternative. 66 00:04:48,470 --> 00:04:50,030 We're just going to go with name. 67 00:04:51,290 --> 00:04:58,280 And then we're going to have another thing, the d'Hiv, we have the name and the age shown here. 68 00:04:58,310 --> 00:05:01,640 Let's go with heading for and we'll type your name. 69 00:05:02,000 --> 00:05:06,040 And then right after that, we're going to have a paragraph with an age. 70 00:05:06,560 --> 00:05:09,770 So with my age property and of the. 71 00:05:10,580 --> 00:05:16,850 So once we say this is what we should see on the screen, so we have five birthdays. 72 00:05:16,880 --> 00:05:18,890 That is the length of my list. 73 00:05:19,280 --> 00:05:27,500 And each and every item is a present that we have an image with a name as well as well how old they 74 00:05:27,500 --> 00:05:27,670 are. 75 00:05:27,980 --> 00:05:33,590 And the last thing that I would want to do in this project is to add functionality to my button where 76 00:05:33,590 --> 00:05:35,180 I can clear the list. 77 00:05:35,420 --> 00:05:36,560 So I have state value. 78 00:05:36,780 --> 00:05:39,600 I have some people areas and. 79 00:05:39,620 --> 00:05:40,050 All right. 80 00:05:40,460 --> 00:05:47,090 So the only thing that I would want in this case is to go back to my online function where I'm setting 81 00:05:47,090 --> 00:05:47,900 up the unclick. 82 00:05:48,170 --> 00:05:50,860 And let's just go to that people online. 83 00:05:51,170 --> 00:05:54,590 As far as the new value, I'll just pass in the empty. 84 00:05:54,600 --> 00:05:54,950 All right. 85 00:05:55,280 --> 00:05:59,290 And then, of course, once I click on a button, notice how we close. 86 00:05:59,510 --> 00:06:06,080 And also since we're checking the length and of course, it is going to be zero birthdays today, hopefully 87 00:06:06,080 --> 00:06:10,220 everyone enjoy the project and I hope to see you in the next project.