фильтр выберите выпадающее меню для фильтрации в React?

Question

Я учусь реагировать и имею простое приложение, использующее API страны. Мое приложение успешно отображает все страны и позволяет пользователю фильтровать страны в поиске.

Я хочу иметь возможность использовать выпадающий список для отображения стран по примеру региона: Европа, Азия, Африка и т. Д. c .

Вот мой код:

const Homepage = () => {
  const [countries, setCountries] = useState([]);
  const [searchedCountry, setSearchedCountry] = useState('');
  const [region, setRegion] = useState('');

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

  const handleSearch = (event) => {
    setSearchedCountry(event.target.value);
  };
  const handleSelect = (event) => {
    setRegion(event.target.value);
  };

  // Filter function
  const filteredCountries = countries.filter((country) =>
    country.name.toLowerCase().includes(searchedCountry.toLowerCase())
  );
  const filteredRegion = countries.filter((country) =>
    country.region.toLowerCase().includes(region.toLocaleLowerCase())
  );

  return (
    <div className='homepage'>
      <input type='text' onChange={handleSearch} />
      <select value={region} onChange={handleSelect}>
        <option value='All'>All</option>
        <option value='Europe'>Europe</option>
        <option value='Asia'>Asia</option>
        <option value='Africa'>Africa</option>
        <option value='Americas'>Americas</option>
        <option value='Oceania'>Oceania</option>
      </select>
      <CountryList
        filteredCountries={filteredCountries}
        filteredRegion={filteredRegion}
      />
    </div>
  );
};

И мой список стран

const CountryList = ({ filteredCountries, filteredRegion }) => {
  return (
    <div className='card-list'>
      {filteredCountries.map((country) => (
        <Country key={country.name} id={country.name} country={country} />
      ))}
    </div>
  );
};

В настоящее время функция filterRegion передается компоненту списка, но я не уверен, как сделать так, чтобы при выборе региона отображались только страны этого региона.

Answer 1

Вместо того, чтобы фильтровать страны на основе 'name' и 'region' по отдельности, вы можете объединить в одну функцию фильтра, как показано ниже, и вам не понадобится второй аргумент для ContryList. Надеюсь, это поможет.

const filteredCountries = countries.filter(
  country =>
    country.name.toLowerCase().includes(searchedCountry.toLowerCase()) &&
    country.region.toLowerCase().includes(region.toLocaleLowerCase())
);