Filter is not a function using React UseEffect of a data from MongoDB

Question

I am working on a MERN ecommerce stack application. I have an API that returns all the Products I have from my MongoDB. I have attached a console log of the products Array from the API in the Image below.

Now my question here is, I am using a useEffect() on the products returned from the API in the DB such that on the Frontend if a user chooses a select option, it renders and only brings the items related to that Select option. I have added the useEffect code next for which I am applying a filter:

const [filteredProducts, setFilteredProducts] = useState([]);
useEffect(() => {
    cat &&
      setFilteredProducts(
        products.filter((item) =>
          Object.entries(filters).every(([key, value]) =>
            item[key].includes(value)
          )
        )
      );
  }, [products, cat, filters]);

So a little explanation of the variables are:

products: Array from the API above. I have added the first index next

{
"products": [
    {
        "_id": "6208edc07351ca41b4656fc7",
        "title": "Hisense Microwave",
        "desc": "A Cool Smart Microwave",
        "image": "https://www.pngarts.com/files/3/Women-Jacket-PNG-High-Quality-Image.png",
        "categories": [
            "Heaters",
            "Microwaves",
            "Home Appliances"
        ],
        "brand": [
            "Hisense"
        ],
        "color": [
            "White",
            "Black",
            "Gray"
        ],
        "price": 500,
        "inStock": true,
        "createdAt": "2022-02-13T11:38:40.861Z",
        "updatedAt": "2022-02-13T11:38:40.861Z",
        "__v": 0
    }
]}

cat: Is the category a user clicked that returned the products[categories] array. Eg: Heaters, Microwave, Home Appliances

filters: is a React useState that returns what the User wants to filter from the Dropdown. I have attached an image of the react useState filters variable

But my error is having in the console shows filter is not a function. I have read about this but do not find a way around it. Please any help will be highly appreciated.

Answer 1

I found the solution bro lamadev didn't added return statement I dont know why his code is working Try this

useEffect(()=>{
    cat && setFilteredProducts(
      products.filter((item)=>{
        return(
          Object.entries(filters).every(([key,value])=>{
            return(
              item[key].includes(value)
              
            )
          })
        )
      })
    )
    console.log(filteredProducts)
  }, [products, cat, filters])