title: how do I get my filter buttons to work in React using a json file?
body: <p>Ive recently moved my product information from my shop to a separate JSON file and I cant work out how to fix my filter buttons as the information is on longer in the same page. My products are appearing on the page so the information is being read from the JSON file as its imported into my App. Any ideas would be much Appreciated. Below is my shop file and product Json file</p>
  <pre><code>import React, { useState } from 'react';
  import AddToCart from './Components/AddToCart';
  import { BrowserRouter as Router, Routes, Route, Link, useNavigate  }
  from &quot;react-router-dom&quot;;
  import Product from './Product';
  
  const HOME_GARDEN = 'home and garden';
  const ART = 'Art';
  const ACCESSORIES = 'Accessories';
  const DIGITAL_PHOTOGRAPHS = 'Digital Photographs';
  const FASHION = 'Fashion';
  const FOOTWEAR = 'Footwear';
  const JEWELLERY = 'Jewellery';
  const ALL = 'All';
  
  export default function Shop({ products, setCart, cart, handleClick }) {
  
  
  const navigate = useNavigate()
  
  const [category, setCategory] = useState(ALL);
  
  const getProductsInCategory = () =&gt; {
  if (category === ALL) {
      return products;
  } else {
      return products.filter((product) =&gt; product.category === category);
  }
  };
  
   return (
    &lt;&gt;
    &lt;h1&gt;Shop&lt;/h1&gt;
  
      &lt;button onClick={(e) =&gt; setCategory(ART)}&gt;
        Art&lt;/button&gt;
        &lt;button onClick={(e) =&gt; setCategory(HOME_GARDEN)}&gt;
          Home and Garden&lt;/button&gt;
        &lt;button onClick={(e) =&gt; setCategory(ACCESSORIES)}&gt;
        Accessories&lt;/button&gt;
        &lt;button onClick={(e) =&gt; setCategory(DIGITAL_PHOTOGRAPHS)}&gt;
        Digital Photographs&lt;/button&gt;
        &lt;button onClick={(e) =&gt; setCategory(FASHION)}&gt;
        Fashion&lt;/button&gt;
        &lt;button onClick={(e) =&gt; setCategory(FOOTWEAR)}&gt;
        Footwear&lt;/button&gt;
      &lt;button onClick={(e) =&gt; setCategory(JEWELLERY)}&gt; Jewellery&lt;/button&gt;
        &lt;button onClick={(e) =&gt; setCategory(ALL)}&gt;
            All&lt;/button&gt;
  
    &lt;div className=&quot;products&quot;&gt;
        {getProductsInCategory().map((product, idx) =&gt;(
          &lt;div className=&quot;product&quot; key={idx}&gt;
            &lt;h3&gt;{product.name}&lt;/h3&gt;
            &lt;h4&gt;£{product.cost}&lt;/h4&gt;
            &lt;img src={product.image} alt={product.name} /&gt;
            &lt;br /&gt;
  
  
  
            &lt;AddToCart product={product} cart={cart} setCart={setCart}/&gt;
  
            &lt;Link to={`/Product/${product.id}`}&gt;&lt;button type=&quot;button&quot;&gt;Product&lt;/button&gt; 
         &lt;/Link&gt;
  
          &lt;/div&gt;
      ))}
     &lt;/div&gt;
  
     &lt;/&gt;
     );
     }
  </code></pre>
  <p>and my JSON file with all my product info</p>
  <pre><code>{
  &quot;productsData&quot; :
  [
  {
    &quot;id&quot;: &quot;0001&quot;,
    &quot;category&quot;: &quot;ART&quot;,
    &quot;name&quot;: &quot;Original David Bowie Mug Shot Mixed Media Framed Artwork&quot;,
    &quot;cost&quot;: 200,
    &quot;image&quot;:&quot;images/bowiebig.jpeg&quot;,
    &quot;image2&quot;: &quot;images/bowiesmall.jpeg&quot;,
    &quot;image3&quot;:&quot;images/bowie2small.jpeg&quot;,
    &quot;description&quot;: &quot;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&quot;
  
     },
     {   &quot;id&quot;: &quot;0002&quot;,
      &quot;category&quot;: &quot;ACCESSORIES&quot;,
      &quot;name&quot;: &quot;F&amp;F Ladies Long Black Real Leather Size Small Gloves&quot;,
      &quot;cost&quot;: 35,
      &quot;image&quot;:&quot;images/Fred.jpeg&quot;,
      &quot;image2&quot;: &quot;&quot;,
      &quot;image3&quot;:&quot;&quot;,
      &quot;description&quot;: &quot;F&amp;F Ladies Long Black Real Leather Size Small Gloves with ruched 
       horizontal detailing on the front. Gloves are in good condition &quot;
  
      },
      {
        &quot;id&quot;: &quot;0003&quot;,
        &quot;category&quot;: &quot;DIGITAL_PHOTOGRAPHS&quot;,
        &quot;name&quot;: &quot;Black on Black Original Limited Edition Digital Photograph&quot;,
        &quot;cost&quot;: 50,
        &quot;image&quot;:&quot;images/BlackonBlack.jpg&quot;,
        &quot;image2&quot;: &quot;&quot;,
        &quot;image3&quot;:&quot;&quot;,
        &quot;description&quot;: &quot;Upon purchase you will receive links to download the digital 
         photograph in the thank you page of the checkout as well as an emailed link 
         that will last 30 days. &quot;
  
        },
  
        {
          &quot;id&quot;: &quot;0004&quot;,
          &quot;category&quot;: &quot;FASHION&quot;,
          &quot;name&quot;: &quot;Ladies Small BOY London Distressed Acid Wash Blue Midi Denim Skirt&quot;,
          &quot;cost&quot;: 50,
          &quot;image&quot;:&quot;images/Boy.jpeg&quot;,
          &quot;image2&quot;: &quot;&quot;,
          &quot;image3&quot;:&quot;&quot;,
          &quot;description&quot;: &quot;Ladies Small BOY London Distressed Acid Wash Blue Midi Denim 
           Skirt. BOY London sizes run small. This skirt is size 8/10 even though the 
           label says large. Condition is New with tags.&quot;
  
        },
  
        {   &quot;id&quot;: &quot;0005&quot;,
            &quot;category&quot;: &quot;FOOTWEAR&quot;,
            &quot;name&quot;: &quot;Ladies Size 8 / 41 Black Real Suede Jeffrey Campbell Platform Open 
             Toe Sandals&quot;,
            &quot;cost&quot;: 60,
            &quot;image&quot;:&quot;images/Campbell.jpeg&quot;,
            &quot;image2&quot;: &quot;&quot;,
            &quot;image3&quot;:&quot;&quot;,
            &quot;description&quot;: &quot;Ladies UK Size 8 European size 41 black real suede Jeffrey 
             Campbell high platform open-toe sandals with adjustable strap. The sandals 
             are in good condition as theyve only worn outside a few times. The heel 
             and platform is made from wood so the sandals are sturdy but relatively 
             lightweight. &quot;
  
          },
          {
             &quot;id&quot;: &quot;0005&quot;,
              &quot;category&quot;: &quot;JEWELLERY&quot;,
              &quot;name&quot;: &quot;Jean Paul Gaultier Scandal Bottle Top Customised Fishnet 
               Necklace&quot;,
              &quot;cost&quot;: 50,
              &quot;image&quot;:&quot;images/Scandal.jpeg&quot;,
              &quot;image2&quot;: &quot;&quot;,
              &quot;image3&quot;:&quot;&quot;,
              &quot;description&quot;: &quot;Jean Paul Gaultier Scandal Bottle Top Customised Necklace 
               made with braided fishnets.&quot;
  
            }
  
        ]}
  </code></pre>