Fetch url with javascript property inserted, but UTF-8 characters keeps appearing in the console causing 404

Viewed 404

this is the main problem:

: decodeURI(`https://disease.sh/v3/covid-19/countries​/${countryCode}`);

in console i get this:

App.js:59 GET https://disease.sh/v3/covid-19/countries%E2%80%8B/AI 404

the url somehow changes only upon doing the fetch(url), the countryCode when i console.log seems fine

there are these random letters %E2%80%8B inside the url that i dont want how do i remove it?

const onCountryChange = async (event) => {
    const countryCode = event.target.value;
    console.log('country info', countryCode) 

    const url = countryCode === 'worldwide' ? "https://disease.sh/v3/covid-19/all" : decodeURI(`https://disease.sh/v3/covid-19/countries​/${countryCode}`);
    
    await fetch(url)
    .then(response => response.json())

    .then(data => {
      setCountry(countryCode);
      setCountryInfo(data);

    })
  };
2 Answers

You might have to clean the event.target.value before you use it as a parameter in the URL.

If you do a simple regex clean on the input text, it should be solved:

const countryCode = event.target.value.replace(/[^\x00-\x7F]/g, "");

Similar question: Wordpress putting %E2%80%8E at the end of my url, howcome?

Related