Conditional operator not showing button React

I’ve a problem with my code. My conditional operator is not showing a button when my itemCount is > 0. The first button is shown (the ItemCount) but the second one is not showing. Here’s my code:

const ItemDetail = ({product}) => {
  const [itemCount, setItemCount] = useState(0)

  const onAdd = (quantity) => {
    setItemCount(quantity)
  }

    return (
      <div className="vino-container">
        <img className="vino-imagen" alt="a_wine_image" src={product.image} />
        <div className="vino-orden">
          <h3 className="vino-titulo">{product.title}</h3>
          <p className="vino-descripcion">{product.description}</p>
          <p className="vino-precio">${product.price}</p>
          {itemCount === 0
          ? <ItemCount stock={product.stock} initial={product.initial} onadd={onAdd}/>
          : <Link to="/cart"><button className="btn btn-light">Revisar</button></Link>
          }
        </div>
      </div>
    );
  };

ItemCount.jsx:

function ItemCount({stock, initial, onAdd}) {
    const [number, setNumber] = useState(0);

    const handleNumberSum = () => {
        if(number >= stock){
            return
        }
        setNumber(number+1)
    }

    const handleNumberMin = () => {
        if(number <= initial){
            return
        }
        setNumber(number-1)
    }

    const addToCart = () => {
        alert(`Has añadido ${number} productos`)
    }

    return (
        <div className="d-grid gap-2 d-md-block">
            <button className="btn btn-primary resta" type="button" onClick={handleNumberMin}>-</button>
            {number}
            <button className="btn btn-primary suma" type="button" onClick={handleNumberSum}>+</button>
            <button className="btn btn-primary agregar" type="button" onClick={addToCart}>Add to cart</button>
        </div>
 )  
}

>Solution :

Your problem is you don’t update itemCount state with onAdd in ItemCount component.

The change should be

function ItemCount({stock, initial, onAdd}) {
    const [number, setNumber] = useState(0);

    const handleNumberSum = () => {
        if(number >= stock){
            return
        }
        setNumber(number+1)
        onAdd(number+1) //change `itemCount` state
    }

    const handleNumberMin = () => {
        if(number <= initial){
            return
        }
        setNumber(number-1)
        onAdd(number-1) //change `itemCount` state
    }

    const addToCart = () => {
        alert(`Has añadido ${number} productos`)
    }

    return (
        <div className="d-grid gap-2 d-md-block">
            <button className="btn btn-primary resta" type="button" onClick={handleNumberMin}>-</button>
            {number}
            <button className="btn btn-primary suma" type="button" onClick={handleNumberSum}>+</button>
            <button className="btn btn-primary agregar" type="button" onClick={addToCart}>Add to cart</button>
        </div>
 )  
}

And you also need to modify onadd to onAdd in props of ItemCount like below

<ItemCount stock={product.stock} initial={product.initial} onAdd={onAdd}/>

Leave a Reply