dezaktywacja przycisku po kliknięciu

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

@mistrzkrisu6:

Trochę na czuja to piszę, ale chyba coś takiego
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 && cartItems.find((item) => item.id === product.id)}
                            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>
    )
}

Kiedy miałeś disabled={cartItems} to pewnie zawsze przycisk był wyłączony, bo cartitems to array, a array zawsze jest "truthy" nawet kiedy jest pusta.

@m31: wywala:Uncaught TypeError: Cannot read property 'find' of undefined