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>
)
}