const [prod,setProd] = useState(products);
const filterProd =(res)=>{
const updatedRes = products.filter((x) =>{
return x.category === res;
}) ;
setProd(updatedRes);
}
<li className="active" onClick={()=> setProd(products)}>All</li>
<li onClick={()=> filterProd('burger')}>Burger</li>
<li onClick={()=> filterProd('pizza')}>Pizza</li>
<li onClick={()=> filterProd('pasta')}>Pasta</li>
<li onClick={()=> filterProd('fries')}>Fries</li>
</ul>
{
prod.map((item)=> {
return(
<>
<CartItem key={item.id}
productData={item}
// itemData={item}
// name={item.name}
// img={item.img}
// price={item.price}
// desc={item.desc}
/>
</>
)
})
}