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

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?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @sagarkaurav
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'sdecodeURI
function.Here is an example of encode decode functions https://www.w3schools.com/JSREF/jsref_decodeuri.asp
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