Limit number on React

Viewed 43

I'm new in React and I don't know how to limit my function handleNumberSum, so the user can´t add more than 5 items in his cart. I've tried with an if statement but it didn't work. Here's my code:

function ItemCount({}) {
    let stock = 5;
    const [number, setNumber] = useState(1);

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

    const handleNumberMin = () => {
        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>
 )  
}
2 Answers

Just change like this.

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