How do I create a 'All' filter button to filter my products? As you can see Ive got the filter buttons for each category but nothing seems to work for 'all'. I think its something simple that Ive missed but cant work it out. Im new to coding so its all a learning curve at the moment thanks in advance

import React, { useState } from 'react';

const HOME_GARDEN = 'home and garden';
const ART = 'Art';


export default function Shop({ setCart, cart, handleClick }) {
const [products] = useState([
{
    category: ART,
    name: 'Original David Bowie Mug Shot Mixed Media Framed Artwork',
    cost: 200,
    image:'images/bowie.jpeg',
    page:'Bowie',
    description: "Original David Bowie Mug Shot Mixed Media Framed Artwork floral 
painting on wooden canvas with an original pop art style David Bowie Mugshot on top 
painting is framed with a red baroque style frame including the words deadly flowers 
 bloom around frame",

  },

{
    category: HOME_GARDEN,
    name: 'Blanket',
    cost: 19.99,
    image:
    'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSpwdYDmUL_ZEqhLV7ZWRdQAU7DGcGaxtCt7SrTlL9umrQs2Un7rj9Nbb9Vq01RtEfA0eAVmdt-&usqp=CAc',
    page:'Blanket',


    },
  ]);

 const addToCart = (product) => {
let newCart = [...cart];
let itemInCart = newCart.find(
  (item) => product.name === item.name
);
if (itemInCart) {
  itemInCart.quantity  ;
} else {
  itemInCart = {
    ...product,
    quantity: 1,
  };
  newCart.push(itemInCart);
}
setCart(newCart);

};

const [category, setCategory] = useState(HOME_GARDEN);

const getProductsInCategory = () => {
return products.filter(
(product) => product.category === category
 );
 };

return ( <>

Shop

    <button onClick={(e) => setCategory(ART)}>
      Art</button>
      <button onClick={(e) => setCategory(HOME_GARDEN)}>
        Home and Garden</button>
      <button onClick={(e) => setCategory()}>
          All</button>
  <div className="products">
      {getProductsInCategory().map((product, idx) =>(
        <div className="product" key={idx}>
          <h3>{product.name}</h3>
          <h4>£{product.cost}</h4>
          <img src={product.image} alt={product.name} />
          <br />
          <button onClick={() => addToCart(product)}>
            Add to Cart
          </button>

          <button onClick={() => handleClick(product)}>
              View Product
            </button>
        </div>
    ))}

</>

); }

CodePudding user response：

Potentially this:

const getProductsInCategory = () => {
    if (category === ALL) {
        return products;
    } else {
        return products.filter((product) => product.category === category);
    }
};

Add an 'all' category at the top:

const HOME_GARDEN = 'home and garden';
const ART = 'Art'; 
const ALL = 'All';

On your 'All' button, use:

<button onClick={(e) => setCategory(ALL)}>
          All</button>