usuwanie wszystkich elementów tablicy po kliknięciu

0

chciałbym wyzerować tablicę cartItems po naciśnięciu clear cart, przycisk znajduje się pod koniec basket, funkcja onClear na początku app, oto mój kod:
app

import Header from './components/Header';
import Main from './components/Main';
import Basket from './components/Basket';
import data from './data';
import { useState, useEffect } from 'react';

const cartFromLocalStorage = JSON.parse(localStorage.getItem('cartItems') || '[]');

function App() {
  const { products } = data;
  const [cartItems, setCartItems] = useState(cartFromLocalStorage);
  const [isActive, setActive] = useState(false);

  const totalItems = cartItems.reduce((a, c) => a + c.qty, 0);

  const onClear = (product) => {
    const exist = cartItems.find((x) => x.id === product.id);
    setCartItems(cartItems.forEach((x) => x.id === product.id ? {...exist, qty: 0 } : x)
    );
  }

  useEffect(() => {
    localStorage.setItem('cartItems', JSON.stringify(cartItems));
  }, [cartItems]);

  const onShow = () => {
    setActive(!isActive);
  };
  const onAdd = (product) => {
    const exist = cartItems.find((x) => x.id === product.id);
    if (exist) {
      setCartItems(cartItems.map((x) => x.id === product.id ? { ...exist, qty: exist.qty + 1 } : x)
      );
    } else {
      setCartItems([...cartItems, { ...product, qty: 1 }]);
    }
  };

  const onRemove = ( product ) => {
    const exist = cartItems.find((x) => x.id === product.id);
    if (exist.qty === 1) {
      setCartItems(cartItems.filter((x) => x.id !== product.id));
    } else {
      setCartItems(
        cartItems.map((x) => x.id === product.id ? { ...exist, qty: exist.qty - 1 } : x)
      );
    }
  };



  
  return (
    <div className="App">
      <nav className='navbar'>
                <div className="navbar-center">
                    <span>Mobile phones</span>
                    <div onClick={onShow} className='cart-btn'>
                        <span className="nav-icon">
                            <i className="fas fa-cart-plus"></i>
                        </span>
                        <div className="cart-items">
                            {totalItems ? (
                                <span>{totalItems}</span>
                            ) : ('0')}
                        </div>
                    </div>
                </div>
            </nav>
      <Header cartItems={cartItems} onShow={onShow}></Header>
      {/* <div> */}
        <Main onAdd={onAdd} products={products} cartItems={cartItems}></Main>
        <Basket onClear={onClear} onAdd={onAdd} onRemove={onRemove} cartItems={cartItems} isActive={isActive} onShow={onShow}></Basket>
      {/* </div> */}

    </div>
  );
}

export default App;

basket

import React from 'react';

export default function Basket(props) {
    
    const { onClear, cartItems, onAdd, onRemove, isActive, onShow } = props;
    const itemsPrice = cartItems.reduce((a, c) => a + c.price * c.qty, 0);
    return (
        <div>

            <div className={`cart-overlay ${isActive ? "transparentBcg" : ""}`}>
                <div className={`cart ${isActive ? "showCart" : ""}`}>
                    <span onClick={onShow} className="close-cart">
                        <i className="fas fa-window-close"></i>
                    </span>
                    <h2>your cart</h2>
                    <div className="cart-content">
                        {cartItems.length === 0 && <div>Cart is Empty</div>}
                        {cartItems.map((item) => (
                            <div key={item.id} className='cart-item'>
                                <div>
                                <h4>{item.title}</h4>
                                <h5>${item.price}</h5>
                                <span className="remove-item" data-id={item.id}>remove</span>
                                </div>
                                <div>
                                    <i onClick={() => onAdd(item)} className="fas fa-chevron-up" data-id={item.id}></i>
                                    <p className='item-amount'>{item.qty} x ${item.price.toFixed(2)}</p>
                                    <i onClick={() => onRemove(item)} className="fas fa-chevron-down" data-id={item.id}></i>
                                </div>
                            
                                    
                                
                            </div>
    ))}
                    </div>
                    <div className="cart-footer">
                        <h3>your total : $ <span className='cart-total'>{itemsPrice.toFixed(2)}</span></h3>
                        <button onClick={onClear} className='clear-cart banner-btn'>clear cart</button>
                    </div>
                </div>
            </div>
        </div>
    )
}

1

w setCartItems ustawiasz undefined, ponieważ funkcja forEach zwraca zawsze undefined

Nie wczytując się strzelam, że chodziło Ci o map

0

@dzek69: ale dalej źle - tu strona jest https://krystianwojtowicz.github.io/shopping-cart_react/, a tu kod https://github.com/krystianwojtowicz/shopping-cart_react

1 użytkowników online, w tym zalogowanych: 0, gości: 1