How to dynamically handle a multitude of filters with react?

Question

I am currently working on an online store that filters products based on certain criteria such as size, stock, gender, etc.

While I have been able to make it work to a certain extent. My program currently filters by size, gender, sorts by price etc. However, I cannot get it to filter by brand. For some reason once I click on the brand, I am able to filter the function once, however, once I click on another brand the filter for that particular brand does not run.

Here is the link to the code sandbox:

https://codesandbox.io/s/mystifying-roentgen-7mp0t

I am currently stuck with filtering by brand and I have tried to compared my filtered result to the state of the item clicked, by checking if the brand is included in the item and by using localeCompare().

Here is the link to the code sandbox:

https://codesandbox.io/s/mystifying-roentgen-7mp0t

createCheckboxes = () => available_sizes.map(this.createCheckbox);

  handleFormSubmit = event => {
    //4) this button updates the filters on the sizes, which I think I need to fix to update the brands, the price and the gender
    event.preventDefault();
    //5) right here I am storing the selected checkboxes which is what I was doing before by pushing the checkboxes
    const selectedSizes = [...this.selectedCheckboxes];

    const shallowCopy = [...this.state.filteredProducts];
    let filteredProducts = shallowCopy.filter(product =>
      selectedSizes.every(size =>
        product.stock.some(s => s.stock > 0 && s.size === size)
      )
    );


    let filteredGender = filteredProducts.filter(product => {
      return product.gender.some((item, idx, arr) => {
        return item[this.selectedGender] === false ? null : product;
      });
    });


    //***this is the function that is not currently running***//
    let filteredData = filteredGender.filter(product => {
      //console.log(product.brand.includes(this.state.activeBrand))
      //console.log(product.brand = this.state.brand)

      return product.brand.includes(this.state.activeBrand)
    });

    let sortedPrice = filteredData.sort((a, b) => {
      return this.state.sortBy === "min"
        ? a.price - b.price
        : b.price - a.price;
    });


    this.setState({
      filteredProducts: sortedPrice
    });

  };

I am expecting to be able to filter by brand wit this function, once an item is clicked.

Here is the link to the code sandbox:

https://codesandbox.io/s/mystifying-roentgen-7mp0t

unless I am mistaken, at line 549, you assign console.log(product.brand = this.state.brand) which is doubly wrong: you silently assign stuff (you ought to use a comma to log), and this.state.brand is void (hence all your products are filtered out thereafter). By actually removing the console.log I seem able to filter by brand — grodzi
– grodzi, Commented Oct 25, 2019 at 5:36
Awesome dude, I was just using that for debugging purposes but I was not aware of the weird bug it was causing. I appreciate it man! — alexander95371
– alexander95371, Commented Oct 25, 2019 at 12:53

lavor · Accepted Answer · 2019-10-25 07:00:52Z

1

There are 2 errors in your application:

1) the first one is reported by @user753642 in comment to your question, remove this line from index.js, because it sets your brand of all products to "":

console.log(product.brand = this.state.brand)

2) you are filtering filteredProducts and no the all products. While after first filtering on brand the filterdProducts does not have any item of other brands, it returns an empty collection after filtering on another brand. Change line in handleFormSubmit in index.js, from:

const shallowCopy = [...this.state.filteredProducts];

to:

const shallowCopy = [...this.state.products];

answered Oct 25, 2019 at 7:00

lavor

1,8771 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

alexander95371 Over a year ago

That absolutely solved the issue. Thanks a lot boss!

Collectives™ on Stack Overflow

How to dynamically handle a multitude of filters with react?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related