Input validation in react with functional component and useEffect hook

Question

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;

Changing the value out from under the user **as** they're trying to write it generally makes for a poor user experience (UX). I suggest waiting at least until they pause, or leave the field, or try to do something else. — T.J. Crowder, Feb 04 '22 at 09:00
(It's also generally best to convert to number intentionally, rather than implicitly. [Here's an answer of mine](https://stackoverflow.com/questions/28994839/why-does-string-to-number-comparison-work-in-javascript/28994875#28994875) listing various ways to do that and their various quirks.) — T.J. Crowder, Feb 04 '22 at 09:01

score 0 · Answer 1 · answered Feb 04 '22 at 09:25

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:

Only set qty when the string is valid
Track the string separately
Add a validation pattern to the input
Use CSS to provide feedback on the value being entered
(Maybe) Use a placeholder to suggest to the user what to enter

Here'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.)

Input validation in react with functional component and useEffect hook

1 Answers1