Flags of the world

Flag.js

import React, { useCallback, useEffect, useState } from "react";
import { useParams, useHistory } from "react-router-dom";
import axios from "axios";
import { BsArrowLeftShort } from "react-icons/bs";
import styled from "styled-components";

const Flag = ({}) => {
  let { slug } = useParams();
  let history = useHistory();
  const [country, setCountry] = useState({});
  const [loading, setLoading] = useState(true);
  const [borderCountries, setBorderCountries] = useState([]);

  useEffect(() => {
    const getCountry = async () => {
      let { data } = await axios.get(
        `https://restcountries.eu/rest/v2/name/${slug}?fullText=true`
      );
      setCountry(data[0]);
      setLoading(false);
    };

    getCountry();
  }, []);

  const createBorders = useCallback(async () => {
    const final = [];
    for (const countryAbrev of country.borders) {
      let result = await getCountryName(countryAbrev);
      final.push(result);
    }
    setBorderCountries(final);
  }, [country.borders]);

  useEffect(() => {
    if (country && country.borders) {
      createBorders();
    }
  }, [country, createBorders]);

  function handleBack() {
    history.push("/");
  }

  const getCountryName = async (code) => {
    let { data } = await axios.get(
      `https://restcountries.eu/rest/v2/alpha/${code}`
    );
    return data.name;
  };

  if (loading || !country.name){
    return <div> Loading ... </div>;
  } 

  return (
    <StyledCountry>
      <StyledButton onClick={handleBack}>
        <BsArrowLeftShort />
        Back
      </StyledButton>
      <StyledCountryWrapper>
        <div>
          <img src={country.flag} alt={`Flag of ${country.flag}`} />
        </div>
        <div>
          <StyledCountryListWrapper>
            <ul>
              <li>
                Native name: {!country.nativename ? "None" : country.nativename}{" "}
              </li>
              <li>Population: {country.population} </li>
              <li>Region: {country.region}</li>
              <li>Subregion: {country.subregion} </li>
              <li>
                Capital: <span>{country.capital}</span>{" "}
              </li>
            </ul>
            <ul>
              <li>Top level domain: {country.topLevelDomain} </li>
              <li>Region: {country.region}</li>
              <li>
                Languages:{" "}
                {country.languages &&
                  country?.languages?.map((lang, item) => (
                    <span key={item}>{lang.name + ", "}</span>
                  ))}
              </li>
            </ul>
          </StyledCountryListWrapper>
          <StyledBorderCountries>
            <h3>Borders:</h3>
            {/* this is returning Error: Objects are not valid as a React child (found: [object Promise]) */}
            {/* {country.borders && country.borders.map(async (country, idx) => {
              let result = getCountryName(country)
              return (
                <span key={idx}> { result }</span>
              )
            })} */}
            {borderCountries.map((I) => (
              <span key={I}> {I}</span>
            ))}
          </StyledBorderCountries>
        </div>
      </StyledCountryWrapper>
    </StyledCountry>
  );
};

export default Flag;

const StyledCountry = styled.div`
  max-width: 130rem;
  padding: 0 2rem;
  width: 100%;
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
`;

const StyledButton = styled.button`
  padding: 1rem 2rem;
  font-weight: 700;
  text-align: center;
  border-radius: 0.5rem;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.7rem;
  margin-bottom: 3rem;
  cursor: pointer;

  svg {
    font-size: 2.5rem;
  }
`;

const StyledCountryWrapper = styled.div`
  display: flex;
  justify-content: space-between;
  margin-left: -3rem;
  margin-right: -3rem;
  div {
    width: 100%;
    padding: 0 3rem;
  }
  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
`;

const StyledCountryListWrapper = styled.div`
  display: flex;
  justify-content: space-between;

  ul {
    flex: 1 1 50%;
    flex-basis: 50%;
    max-width: 50%;
    width: 100%;
    font-size: 1.7rem;
    line-height: 1.7;
  }
`;

const StyledBorderCountries = styled.div`
  display: flex;

  li {
    padding: 0.5rem 1rem;
    background-color: grey;
    color: black;
    border-radius: 0.5rem;
  }
`;