title: filtering select drop down menu to filter in React?
body: <p>I'm learning react and have a simple app using a countries api. 
  My app successfully displays all the countries and allows user to filter countries in a search input.</p>
  
  <p>I want to be able to use a select dropdown to show countries by region example: Europe, Asia, Africa etc.</p>
  
  <p>Heres my code:</p>
  
  <pre class="lang-js prettyprint-override"><code>const Homepage = () =&gt; {
    const [countries, setCountries] = useState([]);
    const [searchedCountry, setSearchedCountry] = useState('');
    const [region, setRegion] = useState('');
  
    useEffect(() =&gt; {
      console.log('effect');
      axios.get(`https://restcountries.eu/rest/v2/all`).then((response) =&gt; {
        console.log(response);
        setCountries(response.data);
      });
    }, []);
  
    const handleSearch = (event) =&gt; {
      setSearchedCountry(event.target.value);
    };
    const handleSelect = (event) =&gt; {
      setRegion(event.target.value);
    };
  
    // Filter function
    const filteredCountries = countries.filter((country) =&gt;
      country.name.toLowerCase().includes(searchedCountry.toLowerCase())
    );
    const filteredRegion = countries.filter((country) =&gt;
      country.region.toLowerCase().includes(region.toLocaleLowerCase())
    );
  
    return (
      &lt;div className='homepage'&gt;
        &lt;input type='text' onChange={handleSearch} /&gt;
        &lt;select value={region} onChange={handleSelect}&gt;
          &lt;option value='All'&gt;All&lt;/option&gt;
          &lt;option value='Europe'&gt;Europe&lt;/option&gt;
          &lt;option value='Asia'&gt;Asia&lt;/option&gt;
          &lt;option value='Africa'&gt;Africa&lt;/option&gt;
          &lt;option value='Americas'&gt;Americas&lt;/option&gt;
          &lt;option value='Oceania'&gt;Oceania&lt;/option&gt;
        &lt;/select&gt;
        &lt;CountryList
          filteredCountries={filteredCountries}
          filteredRegion={filteredRegion}
        /&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>And my country list</p>
  
  <pre class="lang-js prettyprint-override"><code>const CountryList = ({ filteredCountries, filteredRegion }) =&gt; {
    return (
      &lt;div className='card-list'&gt;
        {filteredCountries.map((country) =&gt; (
          &lt;Country key={country.name} id={country.name} country={country} /&gt;
        ))}
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>Currently the filterRegion function is passed to the list component but I'm unsure how to make it so when region is selected only countries of that region are displayed.</p>