Basically I want to reset my quantity to 1 if equal to 0 or less. I understand I need more validation too but this is the first requirement. This this just keep resetting as soon as I start typing which is obvious
Product.component.js
import { useState, useEffect } from "react";
const Product = () => {
const [qty, setQty] = useState(1);
useEffect(() => { }, [qty]);
const handleChange = (currentQty) => {
if (currentQty > 0) {
console.log("ok");
//Do Somethong
} else {
setQty(1);
}
};
return (
<input type="text" value={qty} onChange={(e) => handleChange(e.target.value)} />
);
};
export default Product;
Since you're using a controlled input, you have to be very careful about setting the value of the input because doing so can get in the way of the user trying to type their value (as you've found).
Instead, I'd:
qty when the string is validHere's an example:
const { useState, useEffect } = React;
const Product = () => {
// The actual quantity
const [qty, setQty] = useState(1);
// The quantity string the user is editing
const [qtyString, setQtyString] = useState(String(qty));
const handleChange = (valueString) => {
// Always update the string
setQtyString(valueString);
// Is it a valid positive number?
valueString = valueString.trim();
const value = valueString ? +valueString : NaN;
if (isNaN(value) || value <= 0) {
// No, our quantity is 1 (even though the string may
// not be)
setQty(1);
} else {
// Yes, use it
setQty(value);
}
};
// Just for demo purposes:
console.log(`qty = ${qty}, qtyString = ${JSON.stringify(qtyString)}`);
return (
<input
placeholder="Please provide a number > 0"
pattern="^[1-9]\d*$"
type="text"
value={qtyString}
onChange={(e) => handleChange(e.target.value)}
/>
);
};
const Example = () => {
return <Product />;
};
ReactDOM.render(<Example />, document.getElementById("root"));input[type=text]:invalid,
input[type=text]:invalid::placeholder{
color: #800;
}
input[type=text]::placeholder {
opacity: 0.8;
font-size: .8em;
}<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>The validation pattern I've included there is for whole numbers greater than zero, you'll want to adjust it if you want partial numbers. (I figured "quantity" was probably a whole number.)