labyrinth-frontend/src/ValidatingInputNumberField.js

import React, {useState} from 'react';

export default function ValidatingInputNumberField({
                                                       id,
                                                       label,
                                                       value = 0,
                                                       constraints = {},
                                                       validatorFn = (value) => {
                                                           return {valid: true, value};
                                                       },
                                                       disabled = false,
                                                       onChange = _ => {
                                                       }
                                                   }) {
    const [error, setError] = useState(null);

    const handleValueChange = (e) => {
        const value = e.target.value;
        const validation = validatorFn(value);
        if (!validation.valid) {
            setError(validation.message);
        } else {
            setError(null);
        }
        onChange(validation.value);
    };
    let errorComponent;
    if (!!error) {
        errorComponent = <span>{error}</span>;
    } else {
        errorComponent = <span/>;
    }
    return (
        <span>
            <label htmlFor={id}>{label}: </label>
            <input id={id}
                   type={"number"}
                   onChange={handleValueChange}
                   value={value || ""}
                   min={constraints.min || null}
                   max={constraints.max || null}
                   disabled={disabled}
            />
            {errorComponent}
        </span>
    );
}