Question 301971 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How do I reset an array filter when a new "option" is selected? (React)

I have been trying to make a category filter for my webshop project that I’ve been working on. I’m fairly new to React/JavaScript, so I’m probably missing something very obvious.

 {!loading
            ? webshopData.categories?.map((item) => {
                const filtered = products.filter((obj) =>
                  item.products.$each.includes(obj._id)
                );

                return (
                  <div
                    className="productsCategorySelector"
                    onClick={() => setProducts(filtered)}
                    key={item.name}
                  >
                    <p className="label-form productsCategoryLabel">
                      {item.name}
                    </p>
                  </div>
                );
              })
            : null}

When I press on the filter, my products do get filtered, but I need to use another function to get my products back. They are saved in a "productsUnsorted" hook/state.

{!webshopData.categories && (
            <p style={{ marginBottom: 20 }}>All products</p>
          )}
          <p
            className="productsAllShow"
            onClick={() => setProducts(productsUnsorted)}
          >
            All products
          </p>

How can I always reset my array to the default (all products shown) when clicking on a new filter? Right now it just overwrites the changes I made with the filtering function, which means that if I filter products that are in the same category, they won’t show up until I’ve hit the "reset" (productsUnsorted) switch. Is there some way that I can reset the array to the "default" state before filtering via. another category? How can I avoid "keep mutating my array" after the one filter has been applied?

I’ve been sat here for hours trying to figure this out. I tried a bunch of things, but none worked. I just simply don’t understand the logic behind what I’m trying to achieve.

Tags:

2

Answers


  1. 0

    Based on your code, it appears that you are sorting the data from the ‘products’ array and then setting it back into the ‘products’ state. Please let me know if my understanding is incorrect. If this is the case, it means that your ‘products’ array will always be filtered from the previously filtered products.

    To avoid this issue, it would be better to use a ‘productUnsorted’ array, to sort your data each time and then store the sorted data into the ‘products’ array.

    const filtered = productsUnsorted.filter(
    (obj) => item.products.$each.includes(obj._id)
);
    Login or Signup to reply.
  2. 0

    Don’t change the original array of productsUnsorted instead take copy via Array.prototyp.filter method. Refer to the code below

    let filtered = productsUnsorted.filter(
    (obj) => item.products.$each.includes(obj._id)
);

    The filter() method of Array instances creates a shallow copy of a portion of a given array

    Read more on filter here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search