Hello,
I'm submitting this solution despite the fact that I need to finish the styling for the details page.
I just have a question regarding the implementation of border countries in details page. I used a package that transforms cca3 into native Name but for certain countries, it causes problems. Do you have any ideas for doing this without a package?
Thank you for your help and future advice :)
Hey Txrigxn,
I too encountered a similar challenge when implementing the display of bordering countries for a specific country on its detailed page. Much like your experience, I found that relying solely on packages in this context often fell short, especially for certain countries.
What I ended up doing was creating a separate object within my code, basically a map. Inside this map, I used the cca3 codes as keys and assigned the corresponding country names as values. It took a form like this in JavaScript:
const cca3ToCountryName = { BEL: 'Belgium', CUB: 'Cuba', // etc'... };
You can build this kind of map using the reduce method on the data fetched from the API, somewhat like this:
const url = 'https://restcountries.com/v3.1/all?fields=name,cca3';
fetch(url)
.then(res => res.json())
.then(data => {
const cca3ToCountryName = data.reduce((acc, curr) => {
acc[curr.cca3] = curr.name.common;
return acc;
}, {});
return cca3ToCountryName;
});
Give this approach a try and see if it works for you.