filtered array outputs an empty array . How to fix it?

Question

I am new to react-native and javascript. I am trying to filter an array of objects, where each object represents a country and has a member variable called name. I have created the following search filter to save countries with search keyword.

I have console.logged every step in between the following function, from array of country's state to filter's state and even the condition includes() also returns true.

const App = () => {
  const [countries,setCountries] = useState([])
  const [filter,setFilter] = useState('')

  useEffect(() =>{
    axios.get('https://restcountries.eu/rest/v2/all')
    .then(response => setCountries(response.data))
  }, [])

  //console.log('countries[] = ',countries)

  const rows = () => {
    const len = countriesToShow.length 
    if(len > 10){
      return(<p>Too many matches, specify another filter</p>)
    }
    else if(len >=1 && len <= 10){
      return(countriesToShow.map(country => <p>{country.name}</p>))
    }

  }


  const handleFilterChange = (event) => {
    setFilter(event.target.value)
  }

const countriesToShow = filter === '' ? [] : countries.filter(country => country.name.toLowerCase().includes(filter.toLowerCase()))

 return(
    <div>
      find countries
      <input value={filter} onChange={handleFilterChange} />
      {rows()}
    </div>
  )
}

export default App;

I expect an array with the filtered country names but I am actually getting an empty array.

If I add const countries = [{name: 'USA'}, {name: 'Canada'}]; let filter = 'Canada'; before your code, countriesToShow contains [{name:'Canada'}] once it runs. — James
– James, Commented Sep 11, 2019 at 19:49

Rohit Kashyap · Accepted Answer · 2019-09-11 19:38:05Z

1

Try this:

This is a reusable function which you can use to filter an array using a key of your choice, this can further be made reusable by passing in a custom attribute.

var arr = [
  {
    id: 1,
    country: 'IN'
  },
    {
    id: 2,
    country: 'US'
  },
    {
    id: 3,
    country: 'CH'
  },
    {
    id: 4,
    country: 'UK'
  }
]

const fn = (data, key) => ( data.filter(d => ( d.country.toLowerCase().indexOf(key.toLowerCase()) > -1 )))

console.log(fn(arr, 'IN'))

answered Sep 11, 2019 at 19:38

Rohit Kashyap

1,5922 gold badges11 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

filtered array outputs an empty array . How to fix it?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related