Complete rules page

1 files changed, 23 insertions, 17 deletions

diff --git a/frontend/src/components/fields/extensions/NumericField.js b/frontend/src/components/fields/extensions/NumericField.js
index 8823c42..ed81ed7 100644
--- a/frontend/src/components/fields/extensions/NumericField.js
+++ b/frontend/src/components/fields/extensions/NumericField.js
@@ -11,25 +11,31 @@ class NumericField extends Component {
         };
     }
 
-    render() {
-        const handler = (value) => {
-            value = value.replace(/[^\d]/gi, '');
-            let intValue = 0;
-            if (value !== "") {
-                intValue = parseInt(value);
-            }
-            const valid =
-                (!this.props.validate || (typeof this.props.validate === "function" && this.props.validate(intValue))) &&
-                (!this.props.min || (typeof this.props.min === "number" && intValue >= this.props.min)) &&
-                (!this.props.max || (typeof this.props.max === "number" && intValue <= this.props.max));
-            this.setState({invalid: !valid});
-            if (this.props.onChange) {
-                this.props.onChange(intValue);
-            }
-        };
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        if (prevProps.value !== this.props.value) {
+            this.onChange(this.props.value);
+        }
+    }
 
+    onChange = (value) => {
+        value = value.toString().replace(/[^\d]/gi, '');
+        let intValue = 0;
+        if (value !== "") {
+            intValue = parseInt(value);
+        }
+        const valid =
+            (!this.props.validate || (typeof this.props.validate === "function" && this.props.validate(intValue))) &&
+            (!this.props.min || (typeof this.props.min === "number" && intValue >= this.props.min)) &&
+            (!this.props.max || (typeof this.props.max === "number" && intValue <= this.props.max));
+        this.setState({invalid: !valid});
+        if (typeof this.props.onChange === "function") {
+            this.props.onChange(intValue);
+        }
+    };
+
+    render() {
         return (
-            <InputField {...this.props} onChange={handler} initialValue={this.props.initialValue || 0}
+            <InputField {...this.props} onChange={this.onChange} defaultValue={this.props.defaultValue || "0"}
                         invalid={this.state.invalid} />
         );
     }