过滤具有多个项目的平面列表

Question

I am learning React Native by building a RideSharing app. I have a function that allows the user to filter a FlatList component with several ride and each one of them has different items associated to, sutch as date , number of passengers , cost , etc... And filteredDate , filteredPassangers , filteredCost are state variables that allow the user to choose how he wishes to filter.

I wrote the function that filters the data like this:

function filter() {
        const newData1 = lists.filter(
            item => {
                return item.de === filteredFrom 
                || item.para === filteredTo 
                || item.date === filteredDate        
                || item.passangers=== filteredPassangers 
                || item.date === filteredDate 
                || item.cost3 === filteredCost  
            })  
         props.setLists(newData1),  

    //... 
}

When I filter more than 1 item, it returns any Ride component that has at least one of those values as true. However, I only want it return the Rides on which the values I am filtering are true.

For example, if I filter the date and cost items, I want the Ride component to return only the rides on which data and cost are true.

How can I code this in order to filter through the items that are true?

EDIT

This is the current code:

let screen;
    if (selectedValue==='de') { () =>
        setFlags(flags => [...flags, filteredFrom]);
        screen=
//...
    } else if (selectedValue==='para') { () => 
        setFlags([...flags, filteredTo]);
        screen=
//...
    } else if (selectedValue==='date') { () => 
        setFlags(flags => [...flags, filteredDate]);
        screen=
//...
    } else if (selectedValue==='passangers') { () => 
        setFlags(flags => [...flags, filteredPassangers]);
        screen=
        //...
    } else if (selectedValue==='cost3') { () =>
        setFlags(flags => [...flags, filteredCost]);
        screen=
        //...
    }


    //Filtering
    function filterRides() {
        
        const newData1 = lists.filter(
            item => {
                return (flags.includes("filteredFrom")? item.de === filteredFrom :true)
                && (flags.includes("filteredTo")? item.para === filteredTo :true)
                && (flags.includes("filteredDate")? item.date === filteredDate :true)
                && (flags.includes("filteredPassangers")? item.passangers === filteredPassangers :true)
                && (flags.includes("filteredCost")? item.cost3 === filteredCost :true)
            }) 

            
        console.log(flags);
        props.setLists(newData1);
        //...
    } 

Answer 1

You are using || instead of the && aka or instead of and . try this:

function filter() {
    const newData1 = lists.filter(
        item => {
            return item.de === filteredFrom 
            && item.para === filteredTo 
            && item.date === filteredDate        
            && item.passangers=== filteredPassangers 
            && item.date === filteredDate 
            && item.cost3 === filteredCost  
        })  
     props.setLists(newData1),  

//... 
}

EDIT:

If you want to use only some of the filters you can add a list of active flags in a state and then check each item against the state

const [flags, setFlags] = useState([]) //edit2: set this whenever the user selects a filter
function filter() {
const newData1 = lists.filter(
    item => {
        return (flags.includes("filteredFrom")? item.de === filteredFrom :true)
        && (flags.includes("filteredTo")? item.para === filteredTo :true) ...
    })  
 props.setLists(newData1),  

//... 
}