Home > Mobile >  My filter submission function isn't working as intended. Uncaught TypeError: country.match is n
My filter submission function isn't working as intended. Uncaught TypeError: country.match is n

Time:07-25

My code isn't working specifically with the country.name.match function not working as intended.

Error code is as follows: App.js:27 Uncaught TypeError: country.name.match is not a function

REST API being used: https://restcountries.com/#api-endpoints-v3-all

Rest of the code if needed:https://github.com/jnatividad-design/FSO/tree/main/part2/countries

const handleFilterSubmit = (event) => {
      console.log(event.target.value)
      setNewFilter(event.target.value)
      const regex = new RegExp ( newFilter, 'i');
      const filteredCountries = () => countries.filter(country => country.name.match(regex));
      setCountries(filteredCountries)
    }

CodePudding user response:

I figured out what was wrong. The REST API changed the database's structure slightly, adding more specificity to the country and its name. Originally it went country.name instead, it must be country.name.common as the name is another object with properties such as common name, official name, etc.

 const handleFilterSubmit = (event) => {
      console.log(event.target.value)
      setNewFilter(event.target.value)
      const regex = new RegExp ( newFilter, 'i');
      const filteredCountries = () => countries.filter(country => country.name.common.match(regex));
      setCountries(filteredCountries)
    }

CodePudding user response:

It's hard to say without seeing more of the code (knowing what "countries" looks like would be helpful, for example), but my first guess would be that maybe country.name is not a string. Have you verified that the value you're trying to call match() on is a string?

  • Related