title: How to handle multiple select dropdowns in a React application with a single function?
body: <p>I have a forms with 3 select dropdowns that filter an array based on a selected value. Rather than having an onChange handler for each of these forms I was wondering if I could use a single function too handle all of them based on a parameter.</p>
  <p>I tried passing a string into the function but it doesn't work since it is expecting an event to be passed as a parameter.</p>
  <p>Here is the code for the react form:</p>
  <pre><code>const UserSearchBox = ({ handleChange, handleLocationChange, handleTeamChange, handleClientChange }) =&gt; {
      return (
          &lt;form className=&quot;user-search&quot;&gt;
              &lt;input className=&quot;user-input&quot; placeholder=&quot;Search for Peeps&quot; name=&quot;userSearch&quot; onChange={handleChange} /&gt;
  
              &lt;div&gt;
                  &lt;select defaultValue=&quot;all&quot; onChange={handleLocationChange}&gt;
                      &lt;option value=&quot;all&quot;&gt;All&lt;/option&gt;
                      &lt;option value=&quot;boston&quot;&gt;Boston&lt;/option&gt;
                      &lt;option value=&quot;chicago&quot;&gt;Chicago&lt;/option&gt;
                      &lt;option value=&quot;tampa&quot;&gt;Tampa&lt;/option&gt;
                  &lt;/select&gt;
  
                  &lt;select defaultValue=&quot;all&quot; onChange={handleTeamChange}&gt;
                      &lt;option value=&quot;all&quot;&gt;All&lt;/option&gt;
                      &lt;option value=&quot;design&quot;&gt;Design&lt;/option&gt;
                      &lt;option value=&quot;engineering&quot;&gt;Engineering&lt;/option&gt;
                      &lt;option value=&quot;finance&quot;&gt;Finance&lt;/option&gt;
                  &lt;/select&gt;
  
                  &lt;select defaultValue=&quot;all&quot; onChange={handleClientChange}&gt;
                      &lt;option value=&quot;all&quot;&gt;All&lt;/option&gt;
                      &lt;option value=&quot;company&quot;&gt;Company1&lt;/option&gt;
                      &lt;option value=&quot;company2&quot;&gt;Company2&lt;/option&gt;
                      &lt;option value=&quot;company3&quot;&gt;Company3&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
  
  
          &lt;/form&gt;
      )
  }
  </code></pre>
  <p>And this is the code for the App:</p>
  <pre><code>const handleInputChange = (e) =&gt; {
      e.preventDefault();
      let searchTerm = e.target.value;
  
      if(searchTerm){
        let filteredUsers = users.filter((x) =&gt; x.name.toLowerCase().includes(searchTerm.toLowerCase()))
        setUsers(filteredUsers)
      } else{
        setUsers(allUsers)
      }
    }
  
    const handleLocationChange = (e) =&gt; {
      e.preventDefault();
      let searchTerm = e.target.value;
  
      if(searchTerm !== &quot;all&quot;){
        let filteredUsers = allUsers.filter((x) =&gt; x.location.toLowerCase().includes(searchTerm.toLowerCase()))
        setUsers(filteredUsers)
      } else{
        setUsers(allUsers)
      }
    }
  
    return (
      &lt;div className=&quot;container-fluid&quot;&gt;
        &lt;Header name={loggedInUser.name} profile_photo={loggedInUser.profile_photo} /&gt;
        &lt;UserSearchBox handleLocationChange={handleLocationChange} handleChange={handleInputChange}/&gt;
        &lt;Users users={users} /&gt;
      &lt;/div&gt;
    )
  </code></pre>