1 00:00:01,110 --> 00:00:03,480 ‫Let's now quickly build the list 2 00:00:03,480 --> 00:00:07,113 ‫of all the countries that the user has already visited. 3 00:00:08,520 --> 00:00:10,590 ‫And to show you what I mean by that 4 00:00:10,590 --> 00:00:15,107 ‫let's just copy two objects here and then place them here. 5 00:00:18,990 --> 00:00:22,713 ‫And so let's just change them here to another city. 6 00:00:26,370 --> 00:00:31,200 ‫So Barcelona here, and then if we reload 7 00:00:31,200 --> 00:00:34,530 ‫we should get all these five cities. 8 00:00:34,530 --> 00:00:37,920 ‫Now here, why is there some problem. 9 00:00:37,920 --> 00:00:40,143 ‫It's because the IDs are duplicate. 10 00:00:41,100 --> 00:00:43,113 ‫So let's just put something random here. 11 00:00:44,820 --> 00:00:49,320 ‫So React never likes duplicate IDs, but now the idea 12 00:00:49,320 --> 00:00:52,680 ‫is that the user has been to these five cities 13 00:00:52,680 --> 00:00:56,520 ‫which means that they have been to these three countries. 14 00:00:56,520 --> 00:00:59,040 ‫So Portugal, Spain, and Germany. 15 00:00:59,040 --> 00:01:00,840 ‫And so now here in the country's list 16 00:01:00,840 --> 00:01:04,290 ‫we want to show a list of these three countries 17 00:01:04,290 --> 00:01:06,510 ‫that the user have been to. 18 00:01:06,510 --> 00:01:08,490 ‫So basically we want to filter out 19 00:01:08,490 --> 00:01:10,683 ‫the duplicate countries here. 20 00:01:12,540 --> 00:01:16,860 ‫So let's do that. We can leave this open. 21 00:01:16,860 --> 00:01:21,860 ‫And so here we create the CountriesList.jsx component. 22 00:01:26,040 --> 00:01:28,830 ‫And this one will actually be pretty similar 23 00:01:28,830 --> 00:01:31,050 ‫to the city list. 24 00:01:31,050 --> 00:01:34,653 ‫So let's just copy everything and paste that here. 25 00:01:35,820 --> 00:01:39,153 ‫Now of course, here we then need to change some things. 26 00:01:41,130 --> 00:01:45,600 ‫So wherever it says CityList, it should say CountriesList. 27 00:01:48,930 --> 00:01:50,970 ‫So in the name of the CSS module 28 00:01:50,970 --> 00:01:54,330 ‫and the name of the component and also the styles. 29 00:01:54,330 --> 00:01:57,933 ‫But here, important that it is a lowercase C. 30 00:02:00,720 --> 00:02:04,230 ‫Now here we also receive the cities array 31 00:02:04,230 --> 00:02:07,353 ‫into this component, just like the CityList. 32 00:02:08,190 --> 00:02:12,210 ‫So here right now we also receive the cities array 33 00:02:12,210 --> 00:02:13,380 ‫as a prop. 34 00:02:13,380 --> 00:02:17,790 ‫And so from these cities, we can now derive the countries. 35 00:02:17,790 --> 00:02:20,130 ‫Now should we do that right here? 36 00:02:20,130 --> 00:02:23,970 ‫Or maybe we can derive those countries 37 00:02:23,970 --> 00:02:26,310 ‫from the cities right here in app 38 00:02:26,310 --> 00:02:30,780 ‫and then only pass those countries here into the component. 39 00:02:30,780 --> 00:02:33,870 ‫So which option do you think is better? 40 00:02:33,870 --> 00:02:36,510 ‫Well, I think it is actually a lot better 41 00:02:36,510 --> 00:02:39,960 ‫to pass in the cities also into the countries list 42 00:02:39,960 --> 00:02:43,110 ‫and then derive the countries from there 43 00:02:43,110 --> 00:02:45,840 ‫because that operation only needs to happen 44 00:02:45,840 --> 00:02:48,840 ‫when this component here is executed. 45 00:02:48,840 --> 00:02:51,540 ‫While if we had that calculation here 46 00:02:51,540 --> 00:02:54,600 ‫then that calculation would happen each time 47 00:02:54,600 --> 00:02:56,670 ‫that the application rerenders. 48 00:02:56,670 --> 00:02:59,673 ‫So each time this component is executed again. 49 00:03:01,650 --> 00:03:04,500 ‫Right, so that's the kind of things 50 00:03:04,500 --> 00:03:08,730 ‫that you need to start talking about or start thinking about 51 00:03:08,730 --> 00:03:12,663 ‫as you start writing your own React applications. 52 00:03:15,270 --> 00:03:20,270 ‫Okay, so here, let's now then include the CountriesList 53 00:03:20,370 --> 00:03:25,370 ‫and we then, as we just discussed, pass in the cities state 54 00:03:29,250 --> 00:03:31,653 ‫and also the isLoading state. 55 00:03:35,250 --> 00:03:39,690 ‫Okay, now here, there's some problem apparently. 56 00:03:39,690 --> 00:03:44,690 ‫So CountriesList doesn't exist for the CSS module 57 00:03:44,760 --> 00:03:47,443 ‫and that's because I called it here CountryList. 58 00:03:48,390 --> 00:03:51,180 ‫And actually I like that name a bit better. 59 00:03:51,180 --> 00:03:55,800 ‫And I guess that here in this style, 60 00:03:55,800 --> 00:04:00,800 ‫so right here, the style is also called CountryList. 61 00:04:01,380 --> 00:04:02,820 ‫So not countries. 62 00:04:02,820 --> 00:04:07,623 ‫So let's change the name here very quickly to country. 63 00:04:11,880 --> 00:04:14,280 ‫Then it'll automatically update the imports 64 00:04:14,280 --> 00:04:15,483 ‫which is really nice. 65 00:04:20,580 --> 00:04:24,900 ‫Then CountryList here, and let's make it lowercase. 66 00:04:24,900 --> 00:04:29,490 ‫Then in app.js, we see that... 67 00:04:29,490 --> 00:04:31,680 ‫Yeah, it has successfully changed here. 68 00:04:31,680 --> 00:04:35,040 ‫Now we just need to change the import name 69 00:04:35,040 --> 00:04:36,363 ‫also to CountryList. 70 00:04:39,840 --> 00:04:43,680 ‫So this is something that I do all the time actually. 71 00:04:43,680 --> 00:04:45,896 ‫So changing file names. 72 00:04:45,896 --> 00:04:48,150 ‫And so it's good 73 00:04:48,150 --> 00:04:51,900 ‫that this also happened here online on the video. 74 00:04:51,900 --> 00:04:55,620 ‫Now also notice how I just moved this import here up. 75 00:04:55,620 --> 00:04:58,650 ‫And so that's because it's kind of a convention 76 00:04:58,650 --> 00:05:00,060 ‫to have all the imports 77 00:05:00,060 --> 00:05:02,760 ‫from third party libraries at the top. 78 00:05:02,760 --> 00:05:06,390 ‫And then after that we import our own files. 79 00:05:06,390 --> 00:05:09,753 ‫So that's just to make it a bit more organized. 80 00:05:11,040 --> 00:05:14,670 ‫All right, so here we have now our countries list. 81 00:05:14,670 --> 00:05:16,230 ‫This we don't need anymore. 82 00:05:16,230 --> 00:05:20,680 ‫And so now we can derive basically a countries array 83 00:05:25,740 --> 00:05:28,500 ‫from the cities array. 84 00:05:28,500 --> 00:05:31,620 ‫So let's for now just start with an empty array here 85 00:05:31,620 --> 00:05:36,303 ‫so that I can then replace cities here with countries. 86 00:05:38,310 --> 00:05:40,920 ‫And here need to fix that. 87 00:05:40,920 --> 00:05:44,913 ‫And then here each of them is gonna be a country. 88 00:05:49,800 --> 00:05:52,500 ‫And here it is a country item. 89 00:05:52,500 --> 00:05:55,443 ‫And this one I actually already included. 90 00:05:57,270 --> 00:06:00,660 ‫No, not this one, but this one. 91 00:06:00,660 --> 00:06:03,510 ‫So this very simple presentational component 92 00:06:03,510 --> 00:06:05,670 ‫there was no need to write it by hand 93 00:06:05,670 --> 00:06:07,023 ‫and so it's already here. 94 00:06:08,310 --> 00:06:12,993 ‫So CountryItem. And then let's just import that here. 95 00:06:14,880 --> 00:06:16,290 ‫All right. 96 00:06:16,290 --> 00:06:19,320 ‫And hopefully all of this doesn't seem too confusing 97 00:06:19,320 --> 00:06:21,270 ‫or like it's going too fast. 98 00:06:21,270 --> 00:06:25,560 ‫But well, this is simply the reality of React development. 99 00:06:25,560 --> 00:06:27,660 ‫You have all these different files 100 00:06:27,660 --> 00:06:30,840 ‫and it's usual that you just copy-paste some stuff 101 00:06:30,840 --> 00:06:32,733 ‫between them from time to time. 102 00:06:33,660 --> 00:06:38,160 ‫Okay, now here, this key is not going to work 103 00:06:38,160 --> 00:06:41,610 ‫like this for now, so let's just delete it. 104 00:06:41,610 --> 00:06:45,570 ‫And so with this already, our countries should be working. 105 00:06:45,570 --> 00:06:47,570 ‫Of course the countries will not display 106 00:06:48,630 --> 00:06:51,390 ‫but we at least don't get any error. 107 00:06:51,390 --> 00:06:54,960 ‫So that's because the countries are still empty. 108 00:06:54,960 --> 00:06:56,520 ‫But now let's take care of that 109 00:06:56,520 --> 00:07:00,810 ‫where we will derive this from the cities array. 110 00:07:00,810 --> 00:07:04,140 ‫Now the idea is basically to create a new array 111 00:07:04,140 --> 00:07:08,373 ‫which only contains the ones where the city name is unique. 112 00:07:09,420 --> 00:07:12,300 ‫And so for complex operation like this 113 00:07:12,300 --> 00:07:16,380 ‫I many times like to reach for the reducer method. 114 00:07:16,380 --> 00:07:18,990 ‫And I'm sure there would be many other 115 00:07:18,990 --> 00:07:21,570 ‫maybe even more efficient ways of doing so, 116 00:07:21,570 --> 00:07:23,910 ‫but this is just how I like to do it. 117 00:07:23,910 --> 00:07:27,450 ‫And of course, I could already have included the code here 118 00:07:27,450 --> 00:07:30,660 ‫as starter code, but I thought it might be a good idea 119 00:07:30,660 --> 00:07:34,023 ‫to just walk you through the code as I'm writing it here. 120 00:07:39,570 --> 00:07:44,280 ‫But anyway, so in each iteration of the reduce method 121 00:07:44,280 --> 00:07:48,300 ‫we get access to a accumulator and to the current value. 122 00:07:48,300 --> 00:07:51,060 ‫So that's gonna be the current city. 123 00:07:51,060 --> 00:07:53,250 ‫And then here as a starter value 124 00:07:53,250 --> 00:07:55,530 ‫we want to start with an empty array. 125 00:07:55,530 --> 00:07:57,120 ‫And so then into this array 126 00:07:57,120 --> 00:08:00,303 ‫we will place the new unique objects. 127 00:08:01,620 --> 00:08:04,680 ‫So here we can just, let's call it array. 128 00:08:04,680 --> 00:08:08,493 ‫The accumulator and the current, it's just a city. 129 00:08:09,540 --> 00:08:11,070 ‫Okay? 130 00:08:11,070 --> 00:08:13,110 ‫And now let's start by checking 131 00:08:13,110 --> 00:08:17,073 ‫if the array already contains the current city. 132 00:08:18,420 --> 00:08:23,313 ‫So we can say the array, then we map over it, 133 00:08:25,140 --> 00:08:29,670 ‫and then el.city, which will basically create an array 134 00:08:29,670 --> 00:08:33,693 ‫of all the cities that are already in the countries array. 135 00:08:34,920 --> 00:08:39,843 ‫And then we ask if this includes the current city. 136 00:08:41,490 --> 00:08:45,330 ‫Or actually the country in the current city. 137 00:08:45,330 --> 00:08:49,020 ‫Okay, so if that is not the case, 138 00:08:49,020 --> 00:08:52,890 ‫so if the current country is not yet in this array 139 00:08:52,890 --> 00:08:54,780 ‫that we are creating here, 140 00:08:54,780 --> 00:08:59,370 ‫well, then let's return a new array 141 00:08:59,370 --> 00:09:03,933 ‫which will contain all the current elements plus a new one. 142 00:09:06,030 --> 00:09:10,577 ‫So here the country will be the current city.country 143 00:09:11,753 --> 00:09:16,753 ‫and the emoji will be the current city.emoji. 144 00:09:19,020 --> 00:09:23,250 ‫And if not, so if the country's array 145 00:09:23,250 --> 00:09:25,680 ‫already includes the current country 146 00:09:25,680 --> 00:09:29,640 ‫then we just return the current country's array, 147 00:09:29,640 --> 00:09:33,120 ‫which is called array in this situation. 148 00:09:33,120 --> 00:09:35,190 ‫Now here we have some problem 149 00:09:35,190 --> 00:09:39,990 ‫so we should probably wrap the entire function body here 150 00:09:39,990 --> 00:09:42,783 ‫into this block. 151 00:09:43,650 --> 00:09:46,590 ‫But still, somehow it's complaining. 152 00:09:46,590 --> 00:09:51,030 ‫Yeah, there we go. So let's check this. 153 00:09:51,030 --> 00:09:52,920 ‫Or actually we don't even need to check 154 00:09:52,920 --> 00:09:55,173 ‫because it should then already work here. 155 00:09:56,640 --> 00:10:00,273 ‫And that's not really working. So let's see. 156 00:10:01,140 --> 00:10:05,193 ‫And here it should be, of course, the country. 157 00:10:07,320 --> 00:10:09,120 ‫And there we go. 158 00:10:09,120 --> 00:10:13,800 ‫So now only the three countries here that are unique 159 00:10:13,800 --> 00:10:16,773 ‫basically remained right here in this array. 160 00:10:17,670 --> 00:10:20,610 ‫So this is just a common JavaScript here, 161 00:10:20,610 --> 00:10:23,010 ‫has nothing to do with React development. 162 00:10:23,010 --> 00:10:25,350 ‫So that's why we don't need to go deep 163 00:10:25,350 --> 00:10:27,390 ‫into how this code works. 164 00:10:27,390 --> 00:10:29,190 ‫So basically all this does 165 00:10:29,190 --> 00:10:31,920 ‫is to, as it loops over the city array, 166 00:10:31,920 --> 00:10:34,680 ‫it keeps constructing the countries array 167 00:10:34,680 --> 00:10:38,250 ‫which starts at zero, so completely empty. 168 00:10:38,250 --> 00:10:39,720 ‫And so then in each iteration 169 00:10:39,720 --> 00:10:42,300 ‫it asks if this array here 170 00:10:42,300 --> 00:10:45,420 ‫already includes the current city. 171 00:10:45,420 --> 00:10:48,420 ‫So the city that is currently being looped over. 172 00:10:48,420 --> 00:10:49,860 ‫And if not, 173 00:10:49,860 --> 00:10:54,120 ‫well, then we basically add a new object to that array 174 00:10:54,120 --> 00:10:57,063 ‫which contains the current country and the emoji. 175 00:10:58,050 --> 00:11:00,330 ‫Okay, and so with that 176 00:11:00,330 --> 00:11:04,413 ‫we finish this list of countries here as well.