Rest Countries App Using React

Community feedback

• 

  Hikmah•1,070

  @HikmahxPosted over 1 year ago

  HI Safi 👋! Great job!

  I tried viewing the code on your GitHub so I can give you a suggestion but I couldn't find the JavaScript. I wanted to rewrite the code based on how you write yours.

  This is just a simple suggestion, something you may use.

  So for the border countries, if you want to get the full country name instead of the abbreviation, you can fetch the border countries inside the function you use to get a single country detail.

  async (name) => {
      try {
        let { data } = await axios.get(
          `https://restcountries.com/v3.1/name/${name}?fullText=true`
        );
        const country = await data;
  
         // CODE IS HERE
        const borders = await data[0].borders;
        if (borders) {
          let borderDetails = await axios.get(
            `https://restcountries.com/v3.1/alpha?codes=${borders.join(",")}`
          );
  
          let allBorders = await borderDetails.data.map(
            (border: any) => border.name.common
          );
  
          return { country, allBorders };
        }
        return { country };
  
        // return allBorders;
      } catch (err) {
        return err
      }
  

  Hope this helps

  Marked as helpful

  0

  ---

  

  Safi Ullah•340

  @Mehar45Posted over 1 year ago

  @Hikmahx Thank you for bringing this to my attention. I didn't realize my src folder wasn't uploaded on my GitHub. However, I have taken the necessary steps to rectify the situation by promptly uploading the missing folder to my Github account. Please feel free to review the updated version at your earliest convenience.

  0

  

  Hikmah•1,070

  @HikmahxPosted over 1 year ago

  @Mehar45 After viewing your code, I made some adjustments to the code I initially sent.

  const [countryBorders, setCountryBorders] = useState([]);
   (async () => {
        try {
          const res = await fetch("https://restcountries.com/v3.1/all");
          if (res.ok) {
            const data: Country[] = await res.json();
            if (!ignore) setCountries(data);
          
            const borders = await data[0].borders;
            if (borders) {
            let borderDetails = await fetch( 
              `https://restcountries.com/v3.1/alpha? 
                codes=${borders.join(",")}`
              );
  
              let allBorders = await borderDetails.data.map(
                (border: any) => border.name.common
              );
              setCountryBorders(allBorders);
            }
          }
        }
  })
  

  The code isn't type checked and you may need to make some modifications. Other than that, feel free to ask any more questions.

  Marked as helpful

  0