Getting problem with duplicate items in the cart in React.js-CodePudding

I am developing a shopping cart application for a Camera shop. I am using ReactJS. On the shop page, there are items that we can add to the cart. I have a total of 9 items on my shop page. My problems are:

A user can select up to 4 items.
After selecting 4 items on the cart, when the user clicks on the CHOOSE 1 FOR ME button, it will provide 1 item only from the selected 4 items, and the rest 3 items will be removed automatically.

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

Shop.js

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 ((product.length > 3)) {
      return;
    } else {
      const newCart = [...cart, product];
      setCart(newCart);
    }
  };
        

    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}></Cart>
        </div>
      </div>
    );
};

export default Shop;

Product.js

import React from 'react';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faShoppingCart } from "@fortawesome/free-solid-svg-icons";
import './Product.css';

const Product = (props) => {        
    const { name, image, price, ratings } = props.product;
    
    return (
      <div className="product">
        <img src={image} alt="" />
        <div className="product-info">
          <h2> {name}</h2>
          <p>Price: ${price}</p>
          <p>
            <small>Ratings: {ratings} Stars</small>
          </p>
        </div>
        <button onClick={()=>props.handleAddToCart(props.product)} className="button-cart">
                ADD TO CART 
                <FontAwesomeIcon className='btn-icon' icon={faShoppingCart} />
        </button>
      </div>
    );
};

export default Product;

Cart.js

import React from 'react';
import './Cart.css';

const Cart = ({ cart }) => {    
    return (
      <div className="cart">
        <h4>Selected Items</h4>
        <div>
          {cart.map((item) => (
            <h4 key={item.id} className="cart-brand-name">
              <img src={item.image} alt="" /> {item.name}
            </h4>
          ))}
        </div>
        <div>
          <button className="button-1">
            <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;

CodePudding user response：

First, if you want the user to be able to select up to 4 products, you should change handleAddToCart's if statement, change product to cart, and the length should be superior ou equal to 4. Then define a chooseOneProductForMeHandler, past it down to Cart, and use it, like so:

    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 chooseOneProductForMeHandler = ()=>{
       setCart([cart[Math.floor(Math.random()*cart.length)]]);  // Here I'm choosing one randomly, but you could change the logic to whatever you want
      }
            

        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={chooseOneProductForMeHandler}></Cart>
            </div>
          </div>
        );
    };

    export default Shop;


   

    import React from 'react';
    import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
    import { faShoppingCart } from "@fortawesome/free-solid-svg-icons";
    import './Product.css';

    const Product = (props) => {        
        const { name, image, price, ratings } = props.product;
        
        return (
          <div className="product">
            <img src={image} alt="" />
            <div className="product-info">
              <h2> {name}</h2>
              <p>Price: ${price}</p>
              <p>
                <small>Ratings: {ratings} Stars</small>
              </p>
            </div>
            <button onClick={()=>props.handleAddToCart(props.product)} className="button-cart">
                    ADD TO CART 
                    <FontAwesomeIcon className='btn-icon' icon={faShoppingCart} />
            </button>
          </div>
        );
    };

    export default Product;


    import React from 'react';
    import './Cart.css';

    const Cart = ({ cart, chooseOneProductForMeHandler }) => {    
        return (
          <div className="cart">
            <h4>Selected Items</h4>
            <div>
              {cart.map((item) => (
                <h4 key={item.id} className="cart-brand-name">
                  <img src={item.image} alt="" /> {item.name}
                </h4>
              ))}
            </div>
            <div>
              <button className="button-1" onClick = {()=>chooseOneProductForMeHandler()}>
                <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;