chciałbym by kiedy ilość danego produktu będzie większa od zera przycisk 'add to bag był dezaktywowany, nie wiej jednak jak zrobić taki warunek w tym przycisku, czy może powinienem pozmieniać jeszcze jakąś część kodu?
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);
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)
);
}
};
const totalItems = cartItems.reduce((a, c) => a + c.qty, 0);
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}></Main>
<Basket onAdd={onAdd} onRemove={onRemove} cartItems={cartItems} isActive={isActive} onShow={onShow}></Basket>
{/* </div> */}
</div>
);
}
export default App;
main
import React from 'react';
import Product from './Product';
export default function Main(props) {
const { products, onAdd, cartItems } = props;
return (
<div>
<section className="products">
<div className="section-title">
<h2>our products</h2>
</div>
<div className="products-center">
{products.map((product) => (
<Product key={product.id} product={product} onAdd={onAdd} cartItems={cartItems}></Product>
))}
</div>
</section>
</div>
)
}
product
import React from 'react'
export default function Product(props) {
const { product, onAdd, cartItems } = props;
return (
<div>
<article className="product">
<div className="img-container">
<img src={product.image} alt={product.title} className='product-img'></img>
<button onClick={() => onAdd(product)}
disabled={cartItems}
className="bag-btn" data-id={product.id}>
<i className='fas fa-shopping-cart'></i>
add to bag
</button>
</div>
<h3>{product.title}</h3>
<h4>{product.price}</h4>
</article>
</div>
)
}