update react

src/app/validating-input-number-field.tsx

@@ -0,0 +1,41 @@
+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);
+    };
+    return (
+        <>
+            <label htmlFor={id}>{label}: </label>
+            <input id={id}
+                   type={"number"}
+                   onChange={handleValueChange}
+                   value={value || ""}
+                   min={constraints.min || null}
+                   max={constraints.max || null}
+                   disabled={disabled}
+            />
+            <span>{error}</span>
+        </>
+    );
+}