Enable use of <>-fragment (update dependencies).

Update style of solution-AND-usermarked fields.

src/App.js

@@ -4,18 +4,26 @@ import InputForm from "./InputForm";
 
 export default function App() {
     const [maze, setMaze] = useState({});
-    let title;
-    if (!!maze.grid) {
-        title = <h1>The Maze ({maze.width}x{maze.height}, ID: {maze.id})</h1>;
-    } else {
-        title = <span/>;
-    }
+    const [showSolution, setShowSolution] = useState(false);
+    const hasValidMaze = !!maze.width &&
+        !!maze.height &&
+        !!maze.id &&
+        !!maze.grid;
     return (
-        <div>
+        <>
             <InputForm handleResult={setMaze}/>
-            {title}
-            <Maze labyrinth={maze}
-                  showSolution={true}/>
-        </div>
+            {hasValidMaze &&
+                <>
+                    <h1>The Maze ({maze.width}x{maze.height}, ID: {maze.id})</h1>
+                    <input type={"checkbox"}
+                           onChange={(e) => {
+                               setShowSolution(e.target.checked);
+                           }}
+                           id={"showSolution"}/><label htmlFor="showSolution">Show Solution</label>
+                    <Maze labyrinth={maze}
+                          showSolution={showSolution}/>
+                </>
+            }
+        </>
     );
 }