Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>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}/>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading