Rest Country Api with color Theme switcher

Community feedback

• 

  lloydjohnlandeza•150

  @lloydjohnlandeza

  Posted over 2 years ago

  One solution to make the border links work, is by fetching the official name of the border country from the API. You can use the following API endpoint to retrieve the official name based on the border code you pass: https://restcountries.com/v3.1/alpha/${border}?fields=name

  Since you already have your BorderButton component in a separate file, you can perform the fetch operation there. Here's an example implementation:

  import { Link } from "react-router-dom"
  import { useEffect, useState } from "react";
  
  const BorderButton = ({border, borderCountryHandler}) => {
        const [borderName, setBorderName] = useState('')
        useEffect(() => {
          fetchName()
        }, [])
        const fetchName = () => {
            const fetching = fetch(`https://restcountries.com/v3.1/alpha/${border}?fields=name`)
            fetching.then( res => res.json())
                    .then(data => setBorderName(data?.name?.official))
        }
  
      return <Link to={`/detail/${borderName}`}  className="btn-border btn" id={border}>{border}</Link>
  }
  
  export default BorderButton
  

  I hope this clarification helps you resolve the issue with the border links in the country detail view. Let me know if you have any further questions!

  01

  Marked as helpful