on Selection option the state is supposed to change and re-render the page with the filtered data, currently, the code is able to filter the origin param correctly, but it's unable to keep the filtered origin when applying another filter likle the destintation,

const [Flight, setFlights] = useState([]);
  const [OriginCountry, setOrigin] = useState([]);
  const [Airline, setAirline] = useState([]);
  const [Loading, setLoading] = useState(true);
  const [search, setSearch] = useState("");


  const [origin, setORG] = useState("");
  const [destination, setDestination] = useState('');


const useFlights = Flight.filter((flights) => {
    return  origin.length > -1
    ? flights
    : origin === flights.Origin_country_id &&
    destination.length === 0
      ?  flights
      : destination === flights.Destination_country_id
 
    

      // flights.Origin_country_id === origin || flights.Destination_country_id === destination || flights.Landing_time.toLowerCase().includes(search) 
  }).map((flights) => {
    const originCountry = OriginCountry.find(
      (country) => country.id === flights.Origin_country_id
    );
    const destCountry = OriginCountry.find(
      (country) => country.id === flights.Destination_country_id
    );
    const airlineCompany = Airline.find(
      (country) => country.id === flights.Airline_company_id
    );

<div >
        <Select
          id="from"
          type="text"
          placeholder="from"
          name="from"
          options={options}
          onChange={(e) => setORG(e.value)}
          
          
        />
        <Select
          id="DE"
          type="text"
          placeholder="Destination"
          name="destination"
          options={options}
          onChange={(e) => setDestination(e.value)}
         
        />

how do i make it work so both filters can apply and filter the data correctly and if there's no matches to display a message?

CodePudding user response：

From your code I am not able to see the use of useState, but as a suggestion you can do something like this

  const [origins, setOrigins] = useState(originsData);
  const [filteredOrigins, setFilteredOrigins] = useState(originsData);

NOTE : in your logic after applying filter just update filteredOrigins using setFilteredOrigins(result)

CodePudding user response：

• per React naming conventions, you should only ever prefix a variable with use if its a hook. You most likely are getting a warning with the naming there.
• useFlights is a perfect memoization candidate. Since it depends on the state of two other state variables, you could optimize useFlights to only recompute when the depending variables change by wrapping it with a useMemo. Example:

const useFlights = useMemo(()=>{
return Flight.filter((flights) => {
    ...
  }).map((flights) => {
    ...
  })
},[origin, destination])

• Lastly, I'm pretty sure your issue is the optional chaining bit in the filter function. It's pretty confusing what's going on there and it may not be working as you'd expect. I'd change it up to be clearer, maybe something like this:

if(origin.length > -1 || destination.length === 0){
  return flights 
}
return origin === flights.Origin_country_id || destination === flights.Destination_country_id

Hope this helps.