I need help to understand why when I console.log(menus) on Menu.jsx it returns an array of values, but if I console.log(item) it only returns an empty array, while the default value of the item is “menus”.

is that mean item != menus ?, while default value of item is menus

thanks

App.jsx

function App() {
  const [cartItems, setCartItems] = useState([]);
  const [users, setUsers] = useState([]);
  const [menus, setMenus] = useState([]);
  // const supabase = useSupabaseClient();

  useEffect(() => {
    getProducts();
  }, []);

  async function getProducts() {
    try {
      const { data, error } = await supabase.from("products").select("*");
      if (error) throw error;
      if (data != null) {
        setMenus(data);
      }
    } catch (error) {
      alert(error.message);
    }
  }

  const handleAddProduct = (product) => {
    const ProductExist = cartItems.find((item) => item.id === product.id);
    if (ProductExist) {
      setCartItems(
        cartItems.map((item) =>
          item.id === product.id
            ? { ...ProductExist, quantity: ProductExist.quantity + 1 }
            : item
        )
      );
    } else {
      setCartItems([...cartItems, { ...product, quantity: 1 }]);
    }
  };

  const handleRemoveProduct = (product) => {
    const ProductExist = cartItems.find((item) => item.id === product.id);
    if (ProductExist.quantity === 1) {
      setCartItems(cartItems.filter((item) => item.id !== product.id));
    } else {
      setCartItems(
        cartItems.map((item) =>
          item.id === product.id
            ? { ...ProductExist, quantity: ProductExist.quantity - 1 }
            : item
        )
      );
    }
  };

  const handleDeleteProduct = (product) => {
    setCartItems(cartItems.filter((item) => item.id !== product.id));
  };

  return (
    <BrowserRouter>
      <>
        <Topbar number={cartItems.length} />
      </>
      <Routes>
        <Route
          path="/"
          element={
            <Menu
              handleAddProduct={handleAddProduct}
              menus={menus}
              cartItems={cartItems}
            />
          }
        ></Route>
        <Route
          path="/cart"
          element={
            <Cart
              cartItems={cartItems}
              handleAddProduct={handleAddProduct}
              handleRemoveProduct={handleRemoveProduct}
              handleDeleteProduct={handleDeleteProduct}
            />
          }
        ></Route>
        <Route path="/order" element={<Order />}></Route>
        <Route path="/contact" element={<Contact />}></Route>
        <Route path="/postproduct" element={<PostProduct />}></Route>
        <Route path="/menu" element={<PostMenus />}></Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Menu.jsx

const Menu = ({ handleAddProduct, menus }) => {
  const [item, setItem] = useState(menus);
  const [search, setSearch] = useState("");

  const menuItems = [...new Set(menus.map((val) => val.category))];

  const filterItems = (cat) => {
    const newItems = menus.filter((newVal) => newVal.category === cat);
    setItem(newItems);
  };

  const listTopMenus = menus
    .filter((newMenus) => newMenus.isRecommended === true)
    .map((menu) => (
      <div
        key={menu.id}
        className="card bg-white drop-shadow-xl p-2 w-52 h-64 "
      >
        <Product menu={menu} handleAddProduct={handleAddProduct} />
      </div>
    ));

  const listMenus = item
    .filter((val) => {
      if (search === "") {
        return val;
      } else if (val.name.toLowerCase().includes(search.toLocaleLowerCase())) {
        return val;
      }
    })
    .map((menu) => (
      <div
        key={menu.id}
        className="card bg-white drop-shadow-xl p-2 w-52 h-64 "
      >
        <Product menu={menu} handleAddProduct={handleAddProduct} />
      </div>
    ));

  return (
    
  );
};

export default Menu;

I need help to understand why when I console.log(menus) on Menu.jsx it returns an array of values, but if I console.log(item) it only returns an empty array, while the default value of the item is “menus”.

is that mean item != menus ?, while default value of item is menus

thanks