My filter submission function isn't working as intended. Uncaught TypeError: country.match is not a function

user_19613186 0
Viewed 38

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)
    }

reactjs arrays javascript
1 Answers

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)
}

user_196131860
Related