@lloydjohnlandeza
Posted
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!
Marked as helpful
@NicoDeLaFuente
Posted
@lloydjohnlandeza Hi Friend,
Your suggest was really good. I have been with this issue for so many time. I made some twists on your code from above but it help me a lot. Let me show it:
const BorderButton = ({ border }) => {
const { isDark } = useContext(ThemeContext)
console.log(isDark)
const [borderName, setBorderName] = useState('')
useEffect(() => {
const borderButtons = document.querySelectorAll(".btn-border")
borderButtons.forEach(card => {
if (isDark) {
card.classList.add("is-dark-elem")
} else {
card.classList.remove("is-dark-elem")
}
})
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?.common.toLowerCase()))
}
return <Link to={`/detail/${borderName}`} className="btn-border btn" id={border}>{border}</Link>
}
Thank you very much for your help. I really really appreciate it. Looking forward to be in touch again really soon.
