title: React search filter using select option and useRef
body: <p>I am using useRef to search for specific flights using a flight booking form having input fields and select with options field. The search works with input fields by adding ref={} property to it. However, I don't know how to apply the same method with select fields. Does anyone have a clue about how it's done?</p>
  <p>Here's the full code for the Search component below:</p>
  <pre><code>import React, { useState, Fragment, useRef } from &quot;react&quot;;
  import {Container} from &quot;react-bootstrap&quot;;
  import axios from &quot;axios&quot;;
  import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
  import {faPlane} from '@fortawesome/free-solid-svg-icons'
  
  // import { useNavigate } from 'react-router-dom';
  
  const Search = ({ onFlightsChange }) =&gt; {
    const departureCity = useRef(&quot;&quot;);
    const destinationCity = useRef(&quot;&quot;);
    const departureDate = useRef(&quot;&quot;);
    const arrivalDate = useRef(&quot;&quot;);
    const cabinClass = useRef(&quot;&quot;);
    const numOfPassengers = useRef(&quot;&quot;);
  
    const [flights, setFlights] = useState([]);
  
    function handleClick() {
      console.log(&quot;Button clicked&quot;);
      var body = {};
  
      if (departureCity.current.value !== &quot;&quot;) {
        body[&quot;from&quot;] = departureCity.current.value;
      }
  
      if (destinationCity.current.value !== &quot;&quot;) {
        body[&quot;to&quot;] = destinationCity.current.value;
      }
  
      if (departureDate.current.value !== &quot;&quot;) {
        body[&quot;departureDate&quot;] = departureDate.current.value;
      }
  
      if (arrivalDate.current.value !== &quot;&quot;) {
        body[&quot;arrivalDate&quot;] = arrivalDate.current.value;
      }
  
      if (cabinClass.current.value !== &quot;&quot;) {
        body[&quot;eSeatsAvailable&quot;] = cabinClass.current.value;
      }
  
      if (numOfPassengers.current.value !== &quot;&quot;) {
        body[&quot;numberOfPassengers&quot;] = numOfPassengers.current.value;
      }
      axios
        .post(&quot;/flights/find&quot;, body)
  
        .then((res) =&gt; {
          console.log(res.data);
          setFlights(res.data);
          onFlightsChange(res.data);
        })
        .catch((err) =&gt; console.log(err));
    }
  
    return (
      &lt;Fragment&gt;
        &lt;Container&gt;
      &lt;div id=&quot;search-form-card&quot; class=&quot;card shadow mb-5 bg-white rounded&quot;&gt;
          &lt;div id=&quot;search-form-card-body&quot; className=&quot;card-body&quot;&gt;
              &lt;p id=&quot;search-form-title&quot; class=&quot;card-title text-center shadow mb-5 rounded&quot;&gt;Find your flight&amp;nbsp;&lt; FontAwesomeIcon icon = {faPlane} color=&quot;blue&quot; /&gt;&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;row&quot;&gt;
              &lt;div class=&quot;col-sm-6&quot;&gt;
                  &lt;select class=&quot;browser-default custom-select mb-4&quot; id=&quot;select&quot;&gt;
                      &lt;option id=&quot;departure-city&quot; value=&quot;&quot; disabled=&quot;&quot; selected=&quot;&quot;&gt;Departure city&lt;/option&gt;
                      &lt;option value=&quot;1&quot;&gt;Cairo&lt;/option&gt;
                      &lt;option value=&quot;2&quot;&gt;Berlin&lt;/option&gt;
                      &lt;option value=&quot;3&quot;&gt;Paris&lt;/option&gt;
  
                  &lt;/select&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-sm-6&quot;&gt;
                  &lt;select class=&quot;browser-default custom-select mb-4&quot; id=&quot;select&quot;&gt;
                      &lt;option id=&quot;destination-city&quot; value=&quot;&quot; disabled=&quot;&quot; selected=&quot;&quot;&gt;Departure city&lt;/option&gt;
                      &lt;option value=&quot;1&quot;&gt;Cairo&lt;/option&gt;
                      &lt;option value=&quot;2&quot;&gt;Berlin&lt;/option&gt;
                      &lt;option value=&quot;3&quot;&gt;Paris&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
              &lt;div class=&quot;row&quot;&gt;
                  &lt;div class=&quot;col-sm-6&quot;&gt;
                  &lt;input 
                  placeholder=&quot;Departure date&quot; 
                  type=&quot;text&quot; id=&quot;date-picker-example&quot; 
                  class=&quot;form-control datepicker mb-4&quot; 
                  ref={departureDate}
                  /&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;col-sm-6&quot;&gt;
                  &lt;input 
                  placeholder=&quot;Arrival date&quot; 
                  type=&quot;text&quot; 
                  id=&quot;date-picker-example&quot; 
                  class=&quot;form-control datepicker mb-4&quot; 
                  ref={arrivalDate}
                  /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;    
              &lt;div class=&quot;row mt-4&quot;&gt;
                      &lt;div class=&quot;col-sm-6&quot;&gt;&lt;select class=&quot;browser-default custom-select mb-4&quot; id=&quot;select&quot;&gt;
                              &lt;option id=&quot;departure-time&quot; value=&quot;&quot; disabled=&quot;&quot; selected=&quot;&quot;&gt;Departure time&lt;/option&gt;
                              &lt;option value=&quot;1&quot;&gt;6:00 AM&lt;/option&gt;
                              &lt;option value=&quot;2&quot;&gt;3:00 PM&lt;/option&gt;
                              &lt;option value=&quot;3&quot;&gt;6:00 PM&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
                  
                  &lt;div class=&quot;col-sm-6&quot;&gt;&lt;select class=&quot;browser-default custom-select mb-4&quot; id=&quot;select&quot;&gt;
                              &lt;option 
                              id=&quot;departure-time&quot; 
                              value=&quot;&quot; disabled=&quot;&quot; 
                              selected=&quot;&quot;&gt;Arrival time
                              
                              &lt;/option&gt;
                              &lt;option value=&quot;1&quot;&gt;6:00 AM&lt;/option&gt;
                              &lt;option value=&quot;2&quot;&gt;3:00 PM&lt;/option&gt;
                              &lt;option value=&quot;3&quot;&gt;6:00 PM&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;row&quot;&gt;
                      &lt;div class=&quot;col-sm-4&quot;&gt;
                          &lt;select class=&quot;browser-default custom-select mb-4&quot; id=&quot;select&quot;&gt;
                              &lt;option id=&quot;children&quot; value=&quot;&quot; disabled=&quot;&quot; selected=&quot;&quot;&gt;Children&lt;/option&gt;
                              &lt;option value=&quot;1&quot;&gt;1&lt;/option&gt;
                              &lt;option value=&quot;2&quot;&gt;2&lt;/option&gt;
                              &lt;option value=&quot;3&quot;&gt;3&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;col-sm-4&quot;&gt;
                          &lt;select class=&quot;browser-default custom-select mb-4&quot; id=&quot;select&quot;&gt;
                              &lt;option id=&quot;children&quot; value=&quot;&quot; disabled=&quot;&quot; selected=&quot;&quot;&gt;Adults&lt;/option&gt;
                              &lt;option value=&quot;1&quot;&gt;1&lt;/option&gt;
                              &lt;option value=&quot;2&quot;&gt;2&lt;/option&gt;
                              &lt;option value=&quot;3&quot;&gt;3&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
                      
                  &lt;/div&gt;   
                  &lt;button className=&quot;btn btn-primary float-right mt-5&quot; onClick= 
                  {handleClick}&gt;Search&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;&lt;br/&gt;
              
     &lt;/Container&gt;
  
      &lt;/Fragment&gt;
    );
  };
  
  export { Search };
  
  </code></pre>
  <p>(Modified section):</p>
  <pre><code>
  
    function handleClick() {
      console.log(&quot;Button clicked&quot;);
      var body = {};
      let value = null;
      
      if (departureCity.current.value !== &quot;&quot;) {
        // body[&quot;from&quot;] = departureCity.current.value;
        value = departureCity.current.value;
        
      }
  </code></pre>
  <pre><code>                &lt;select class=&quot;browser-default custom-select mb-4&quot; id=&quot;select&quot; ref={departureCity}&gt;
                      &lt;option id=&quot;departure-city&quot; value=&quot;&quot; disabled=&quot;&quot; selected=&quot;&quot;&gt;Departure city&lt;/option&gt;
                      &lt;option value=&quot;1&quot;&gt;Cairo&lt;/option&gt;
                      &lt;option value=&quot;2&quot;&gt;Berlin&lt;/option&gt;
                      &lt;option value=&quot;3&quot;&gt;Paris&lt;/option&gt;
  
                  &lt;/select&gt;
  
  </code></pre>