'More efficient way to filter products

I have an array of products that are input into a state called "products" that are the filtered versions of "baseProducts" formatted like this

{
    "data": {
        "field_product_series": "sc950",
        "field_product_roll_size": "15-x-10-yds",
        "field_product_width": null,
        "field_product_width_in": "15",
        "field_product_length": null,
        "field_product_length_in_yards": "10",
        "field_product_finish": "gloss",
        "field_product_color": "bright-gold-metallic",
        "field_product_color_number": "213",
        "field_product_durability": "10-years",
        "field_product_vinyl_class": "g31a",
        "sku": "ASC950-213-1510P",
        "title": "15'' x 10 yards Avery SC950 Gloss Bright Gold 10 year Long Term Punched 2.0 Mil Metallic Cast Cut Vinyl (Color Code 213)"
    }
}

I am trying to be able to filter products based off of a list of fields. I am currently filtering the products like this

const filteredProducts = baseProducts.filter(product => 
                (filters.includes(product.data.field_product_roll_size)) 
            || (filters.includes(product.data.field_product_width_in)) 
            || (filters.includes(product.data.field_product_length_in_yards)) 
            || (filters.includes(product.data.field_product_series))
            || (filters.includes(product.data.field_product_color))
            || (filters.includes(product.data.field_product_color_number))
            || (filters.includes(product.data.field_product_finish)));
        setProducts(filteredProducts);

For example selecting 'roll size' adds that size to the filters state and baseProducts is being filtered by the updated filters state. I know this is inefficient and it really turns into a headache if I try to be able to select multiple filters which I am trying like so

if (filters.length == 2) {
            const filteredProducts = baseProducts.filter(product => 
                (filters.includes(product.data.field_product_roll_size) && filters.includes(product.data.field_product_width_in))
            || (filters.includes(product.data.field_product_roll_size) && filters.includes(product.data.field_product_color))
            || (filters.includes(product.data.field_product_roll_size) && filters.includes(product.data.field_product_length_in_yards))
            || (filters.includes(product.data.field_product_roll_size) && filters.includes(product.data.field_product_series))
            || (filters.includes(product.data.field_product_roll_size) && filters.includes(product.data.field_product_color_number))
setProducts(filteredProducts);

I have over 10k products and want to be able to use at least 8 filters, it is getting more complicated and I am struggling to find a better way to filter, any help is appreciated

I have a demo set up here http://gatsby.htm-mbs.com:8000/cast-vinyl

and the full repo is here https://github.com/nicholastorr/gatsby-d7/blob/master/src/components/Sidebar.js but it is very messy, trying to focus on optimizing filters first



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source