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