Skip to content
Submitted about 4 years ago

REST Countries with Local Search History | ReactJS | SASS | Webpack

Sapinder•565
@sapinder-pal
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...REST Countries API with color theme switcher
  • HTML
  • CSS
  • JS
  • API
4advanced

Design comparison

SolutionDesign

Solution retrospective

I use React Routes for Home and Details page. And so, I set the following path- <Route path='/detail/:countryName' component={DetailsRoute} />

Now this causes the frontendmentor accessibility check to produce so many errors as you can see! Basically it's because the countryName has spaces in it and that goes in the href attribute. Now I can't remove the space because to filter the clicked country from countriesData, I did this-

countriesData.filter(country =>
	country.name === match.params.countryName
)

What do I do to get rid of the accessibility errors?

Community feedback

  • Sagar Kaurav•460
    @sagarkauravPosted about 4 years ago

    Hello @sapinder-pal instead of using the country name for links you can use Country Code which doesn't have space in it. If you still want to use Country name then you can use javascript's encodeURI function to encode the name before putting it in the URL and decode it because before using it with javascript's decodeURI function.

    Here is an example of encode decode functions https://www.w3schools.com/JSREF/jsref_decodeuri.asp

    1
    Sapinder•565
    @sapinder-palPosted about 4 years ago

    @sagarkaurav Oh I see, there is the alphaCode available. :)!

    0
    Sagar Kaurav•460
    @sagarkauravPosted about 4 years ago

    @sapinder-pal use alpha3Code one

    0
    Sapinder•565
    @sapinder-palPosted about 4 years ago

    @sagarkaurav Yes I already meant so ><

    0

Please log in to post a comment

Log in with GitHub

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