Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive page with API, built with Flexbox, Grid and theme toggler

#accessibility#react#fetch

@jelenkoo10

Desktop design screenshot for the REST Countries API with color theme switcher coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
4advanced
View challenge

Design comparison


SolutionDesign

Solution retrospective


I have successfully finished this project but I struggled with React a little bit, especially with the idea I had. So, one of the functionalities required says that users should be able to click through to the border countries on the detail page. I tried to manage that with React Router, but didn't quite know how to do that, so in the end I used conditional rendering to navigate between home and detail pages, and didn't use border countries as links to their detail pages. How would you solve this problem?

Community feedback

Millz 530

@Brezus

Posted

Awesome work dude i just finished this project too and to be able to click through the links you will need to use react routers Link here is a step by step guide

1 Import { Link } from react-router-dom 2 Wrap your border elements inside the Link eg <Link>Random Border</Link> 3 Add a to attribute on the Link tag/component eg <Link to={/${Random Border}}>Random Border</Link> 4 Go to your Details file or component I assume you are using useEffect to fetch data of the country the user clicked on. 5 Your useEffect should have a dependency array which might be empty inside that array add the name of the country the user clicked on this way whenever the name changes the useEffect will re run and update the data I hope this is all clear to you and if not here are three videos which helped me out https://www.youtube.com/watch?v=RUFxmAjbNbg, https://www.youtube.com/watch?v=y_pr4lRoUto, https://www.youtube.com/watch?v=aZGzwEjZrXc&t=12s

Marked as helpful

0

@jelenkoo10

Posted

@Brezus Thank you so much!! I will check up your project too. I thought about using Links only, but wasn't exactly sure how will that do, since I learned only basics of React Router, like working with Switch and Routes, and Links in App component. Also, for this solution I might need to change my project structure a little bit, since I am fetching data on the homepage and then forwarding it to my CountryDetail component as a prop. I will try it, thanks for the feedback one more time! I will check those videos too.

0
Millz 530

@Brezus

Posted

@jelenkoo10 your welcome im glad i could help in anyway good luck and happy coding :)

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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