I'm starting with react and I have an array of objects called arrayToFilter I want to apply multiple filters to, ideally when a user changes the filter select options all filters should be applied to the array and the results returned into a filteredResults array to show, I already have each filter function and their constants but I don't know how to apply all the filters one after another...

Here is my code:

    const [ arrayToFilter, setArrayToFilter ] = useState([ /*array of objects to apply filters to*/ ]);

    const [ filteredResults, setFilteredResults] = useState([ /*array of filtered objects*/ ]);

    const [ categoryOptions, setCategoryOptions ] = useState([ 1,2,3 ]);

    const [ selectedCategoryOptions, setSelectedCategoryOptions ] = useState([ ]);

    const [ searchName, setSearchName ] = useState('');

    const [ hideVenuesWithoutDiscounts, setHideVenuesWithoutDiscounts ] = useState(true);



    const filterHideVenuesWithoutDiscounts = () => 

    {

        if(hideVenuesWithoutDiscounts)

        {

            return arrayToFilter.filter(item => item.discounts.length > 0);

        }

        else

        {

            return arrayToFilter;

        }   

    };



    const filterSelectedCategoryOptions = () => 

    {

        return arrayToFilter.filter(item => item.category_id.includes(selectedCategoryOptions));

    };



    const filtersearchName = () => 

    {

        return arrayToFilter.filter(item =>  item.name.toLowerCase().indexOf(searchTerm.toLowerCase()) != -1);

    };



    useEffect(() => 

    {

        //Filter options updated so apply all filters here

    },

    [searchName, hideVenuesWithoutDiscounts, selectedCategoryOptions]);

Notice useEffect, afaik this is like watch property in vue, I'd like to fire all the filters when a filter input changes