MaorBezalel

Latest comments

• 

  lenny-zanotelli•110

  @lenny-zanotelli

  Submitted over 1 year ago

  

  Rest Countries API with color theme Switch Using REACT

  #axios#react#typescript#vite#tanstack-query

  1

  70
  

  MaorBezalel•340

  @MaorBezalel

  Posted over 1 year ago

  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.

  1

  Marked as helpful