‫Let's now quickly build the list
‫of all the countries that the user has already visited.
‫And to show you what I mean by that
‫let's just copy two objects here and then place them here.
‫And so let's just change them here to another city.
‫So Barcelona here, and then if we reload
‫we should get all these five cities.
‫Now here, why is there some problem.
‫It's because the IDs are duplicate.
‫So let's just put something random here.
‫So React never likes duplicate IDs, but now the idea
‫is that the user has been to these five cities
‫which means that they have been to these three countries.
‫So Portugal, Spain, and Germany.
‫And so now here in the country's list
‫we want to show a list of these three countries
‫that the user have been to.
‫So basically we want to filter out
‫the duplicate countries here.
‫So let's do that. We can leave this open.
‫And so here we create the CountriesList.jsx component.
‫And this one will actually be pretty similar
‫to the city list.
‫So let's just copy everything and paste that here.
‫Now of course, here we then need to change some things.
‫So wherever it says CityList, it should say CountriesList.
‫So in the name of the CSS module
‫and the name of the component and also the styles.
‫But here, important that it is a lowercase C.
‫Now here we also receive the cities array
‫into this component, just like the CityList.
‫So here right now we also receive the cities array
‫as a prop.
‫And so from these cities, we can now derive the countries.
‫Now should we do that right here?
‫Or maybe we can derive those countries
‫from the cities right here in app
‫and then only pass those countries here into the component.
‫So which option do you think is better?
‫Well, I think it is actually a lot better
‫to pass in the cities also into the countries list
‫and then derive the countries from there
‫because that operation only needs to happen
‫when this component here is executed.
‫While if we had that calculation here
‫then that calculation would happen each time
‫that the application rerenders.
‫So each time this component is executed again.
‫Right, so that's the kind of things
‫that you need to start talking about or start thinking about
‫as you start writing your own React applications.
‫Okay, so here, let's now then include the CountriesList
‫and we then, as we just discussed, pass in the cities state
‫and also the isLoading state.
‫Okay, now here, there's some problem apparently.
‫So CountriesList doesn't exist for the CSS module
‫and that's because I called it here CountryList.
‫And actually I like that name a bit better.
‫And I guess that here in this style,
‫so right here, the style is also called CountryList.
‫So not countries.
‫So let's change the name here very quickly to country.
‫Then it'll automatically update the imports
‫which is really nice.
‫Then CountryList here, and let's make it lowercase.
‫Then in app.js, we see that...
‫Yeah, it has successfully changed here.
‫Now we just need to change the import name
‫also to CountryList.
‫So this is something that I do all the time actually.
‫So changing file names.
‫And so it's good
‫that this also happened here online on the video.
‫Now also notice how I just moved this import here up.
‫And so that's because it's kind of a convention
‫to have all the imports
‫from third party libraries at the top.
‫And then after that we import our own files.
‫So that's just to make it a bit more organized.
‫All right, so here we have now our countries list.
‫This we don't need anymore.
‫And so now we can derive basically a countries array
‫from the cities array.
‫So let's for now just start with an empty array here
‫so that I can then replace cities here with countries.
‫And here need to fix that.
‫And then here each of them is gonna be a country.
‫And here it is a country item.
‫And this one I actually already included.
‫No, not this one, but this one.
‫So this very simple presentational component
‫there was no need to write it by hand
‫and so it's already here.
‫So CountryItem. And then let's just import that here.
‫All right.
‫And hopefully all of this doesn't seem too confusing
‫or like it's going too fast.
‫But well, this is simply the reality of React development.
‫You have all these different files
‫and it's usual that you just copy-paste some stuff
‫between them from time to time.
‫Okay, now here, this key is not going to work
‫like this for now, so let's just delete it.
‫And so with this already, our countries should be working.
‫Of course the countries will not display
‫but we at least don't get any error.
‫So that's because the countries are still empty.
‫But now let's take care of that
‫where we will derive this from the cities array.
‫Now the idea is basically to create a new array
‫which only contains the ones where the city name is unique.
‫And so for complex operation like this
‫I many times like to reach for the reducer method.
‫And I'm sure there would be many other
‫maybe even more efficient ways of doing so,
‫but this is just how I like to do it.
‫And of course, I could already have included the code here
‫as starter code, but I thought it might be a good idea
‫to just walk you through the code as I'm writing it here.
‫But anyway, so in each iteration of the reduce method
‫we get access to a accumulator and to the current value.
‫So that's gonna be the current city.
‫And then here as a starter value
‫we want to start with an empty array.
‫And so then into this array
‫we will place the new unique objects.
‫So here we can just, let's call it array.
‫The accumulator and the current, it's just a city.
‫Okay?
‫And now let's start by checking
‫if the array already contains the current city.
‫So we can say the array, then we map over it,
‫and then el.city, which will basically create an array
‫of all the cities that are already in the countries array.
‫And then we ask if this includes the current city.
‫Or actually the country in the current city.
‫Okay, so if that is not the case,
‫so if the current country is not yet in this array
‫that we are creating here,
‫well, then let's return a new array
‫which will contain all the current elements plus a new one.
‫So here the country will be the current city.country
‫and the emoji will be the current city.emoji.
‫And if not, so if the country's array
‫already includes the current country
‫then we just return the current country's array,
‫which is called array in this situation.
‫Now here we have some problem
‫so we should probably wrap the entire function body here
‫into this block.
‫But still, somehow it's complaining.
‫Yeah, there we go. So let's check this.
‫Or actually we don't even need to check
‫because it should then already work here.
‫And that's not really working. So let's see.
‫And here it should be, of course, the country.
‫And there we go.
‫So now only the three countries here that are unique
‫basically remained right here in this array.
‫So this is just a common JavaScript here,
‫has nothing to do with React development.
‫So that's why we don't need to go deep
‫into how this code works.
‫So basically all this does
‫is to, as it loops over the city array,
‫it keeps constructing the countries array
‫which starts at zero, so completely empty.
‫And so then in each iteration
‫it asks if this array here
‫already includes the current city.
‫So the city that is currently being looped over.
‫And if not,
‫well, then we basically add a new object to that array
‫which contains the current country and the emoji.
‫Okay, and so with that
‫we finish this list of countries here as well.