Need to clear all selected items from shopping cart in React js

Question

I am developing a camera shop application using React js. Here I am facing a problem which is I cannot remove all selected items from the cart.

Note: When a user clicks on the "CHOOSE AGAIN" button then all selected items will be removed from the cart.

Live website link: https://eclectic-wisp-4cf573.netlify.app/ .

My code files:

Shop.js file:

import React, { useEffect, useState } from 'react';
import Cart from '../Cart/Cart';
import Product from '../Product/Product';
import './Shop.css';

const Shop = () => {
    const [products, setProducts] = useState([]);
    const [cart, setCart] = useState([]);

    useEffect(() => {
        fetch("data.json")
          .then((res) => res.json())
          .then((data) => setProducts(data));
    }, []);

  const handleAddToCart = (product) => {    
    if (cart.length >= 4) {
      return;
    } else {
      const newCart = [...cart, product];
      setCart(newCart);
    }
  };
  
  const choseOeProductForMeHandler = () => {
    setCart([cart[Math.floor(Math.random() * cart.length)]]); 
  };

    return (
      <div className="shop-container">
        <div className="products-container">
          {products.map((product) => (
            <Product
              key={product.id}
              product={product}
              handleAddToCart={handleAddToCart}              
            ></Product>
          ))}
        </div>

        <div className="cart-container">          
          <Cart
            key={cart.id}
            cart={cart}
            choseOeProductForMeHandler={choseOeProductForMeHandler}
          ></Cart>
        </div>
      </div>
    );
};

export default Shop; 


Cart.js file:

import React from 'react';
import { TrashIcon } from "@heroicons/react/solid";
import './Cart.css';

const Cart = ({ cart, choseOeProductForMeHandler }) => {  
  return (
    <div className="cart">
      <h4>Selected Items</h4>
      <div className="cart-items">
        {cart.map((item) => (
          <h4 key={item.id} className="cart-brand-name">
            <img className="cart-img" src={item.image} alt="" /> {item.name}
            <TrashIcon className="trash-icon"></TrashIcon>
          </h4>
        ))}
      </div>

      <div>
        <button
          className="button-1"
          onClick={() => choseOeProductForMeHandler()}
        >
          <p>CHOOSE 1 FOR ME</p>
        </button>
        <button className="button-2">
          <p>CHOOSE AGAIN</p>
        </button>
        <p>
          <small>You can select up to 4 items</small>
        </p>
      </div>
    </div>
  );
};

export default Cart;

Answer 1

You need to pass the state setter to Cart.js

In particular pass setCart as prop and attach it the the button as onClick={ () => setCart([])}

Answer 2

Maybe is possible to pass a function from the parent to delete all of them. In Shop.js

const Shop = () => {

//.......

const resetCart = setProducts([]);

//.......

}

Then you only need to pass it as a prop to the Card component to us it inside that component.

Answer 3

Can you try this?

<Cart
   key={cart.id}
   cart={cart}
   choseOeProductForMeHandler={() => choseOeProductForMeHandler}
 />