Rest Country Api with color Theme switcher
Design comparison
Solution retrospective
Hi everyone! I had some troubles to make the borders Links in the countries detail functional. I haven´t found the way to make it right. I am really hoping that someone could give me a hand with this particular issue. I am looking for your answers.
Thanks in advance!
Community feedback
- @lloydjohnlandezaPosted over 1 year 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!
Marked as helpful0@NicoDeLaFuentePosted over 1 year ago@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.
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord