package.json

@@ -8,8 +8,8 @@
   "devDependencies": {
     "react-scripts": "1.0.0"
   },
-  "name": "ljg0t8",
-  "description": null,
+  "name": "a-maze-r",
+  "description": "The A-Maze-Ing Generator!",
   "version": "0.0.0",
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -6,7 +6,7 @@ export default function App() {
     const [maze, setMaze] = useState({});
     let title;
     if (!!maze.grid) {
-        title = <h1>The Maze ({maze.width}x{maze.height})</h1>;
+        title = <h1>The Maze ({maze.width}x{maze.height}, ID: {maze.id})</h1>;
     } else {
         title = <span/>;
     }

src/InputForm.js

@@ -20,7 +20,6 @@ export default function InputForm({handleResult}) {
             .then(response => response.json())
             .then(result => {
                 handleResult(result);
-                // FIXME doesn't update the contents of the text input field.
                 setId(_ => result.id);
             })
             .catch(reason => {
@@ -75,7 +74,7 @@ export default function InputForm({handleResult}) {
         <form onSubmit={handleSubmit}>
             <ValidatingInputNumberField id={"width"}
                                         label={"Width"}
-                                        defaultValue={width}
+                                        value={width}
                                         constraints={{
                                             min: 2
                                         }}
@@ -85,7 +84,7 @@ export default function InputForm({handleResult}) {
             /><br/>
             <ValidatingInputNumberField id={"height"}
                                         label={"Height"}
-                                        defaultValue={height}
+                                        value={height}
                                         constraints={{
                                             min: 2
                                         }}
@@ -95,7 +94,7 @@ export default function InputForm({handleResult}) {
             /><br/>
             <ValidatingInputNumberField id={"id"}
                                         label={"ID (optional)"}
-                                        defaultValue={id}
+                                        value={id}
                                         validatorFn={validateIdInput}
                                         disabled={status === "submitting"}
                                         onChange={setId}

src/ValidatingInputNumberField.js

@@ -3,7 +3,7 @@ import React, {useState} from 'react';
 export default function ValidatingInputNumberField({
                                                        id,
                                                        label,
-                                                       defaultValue = 0,
+                                                       value = 0,
                                                        constraints = {},
                                                        validatorFn = (value) => {
                                                            return {valid: true, value};
@@ -13,7 +13,6 @@ export default function ValidatingInputNumberField({
                                                        }
                                                    }) {
     const [error, setError] = useState(null);
-    const [value, setValue] = useState(defaultValue);
 
     const handleValueChange = (e) => {
         const value = e.target.value;
@@ -22,9 +21,8 @@ export default function ValidatingInputNumberField({
             setError(validation.message);
         } else {
             setError(null);
-            onChange(validation.value);
         }
-        setValue(validation.value);
+        onChange(validation.value);
     };
     let errorComponent;
     if (!!error) {