UI enhancements, Add keys to react component lists

Author: jpsierens

src/Actions.js

@@ -18,15 +18,16 @@ class Actions extends Component {
     return (
       <form className="actions">
         <div className="main-menu">
-          <button className="btn btn-primary" onClick={resetMaze}>
+          <button className={`btn ${rows.length ? 'btn-danger' : 'btn-primary'}`} 
+                  onClick={resetMaze}>
             {rows.length ? 'Clear Maze' : 'Generate Maze'}
           </button>
         </div>
 
         { rows.length ? null : 
           <div>
             <div className="row">
-              <div className="col-12 col-sm-6 col-lg-3">
+              <div className="col-12 col-sm-6 col-lg-4 col-xl-3">
                 <div className="form-group">
                   <label htmlFor="widthInput">Width:</label>
 
@@ -44,7 +45,7 @@ class Actions extends Component {
                 </div>
               </div>
 
-              <div className="col-12 col-sm-6 col-lg-3">
+              <div className="col-12 col-sm-6 col-lg-4 col-xl-3">
                 <div className="form-group">
                   <label htmlFor="heightInput">Height:</label>
 
@@ -64,7 +65,7 @@ class Actions extends Component {
             </div>
 
             <div className="row">
-              <div className="col-12 col-sm-6 col-lg-3">
+              <div className="col-12 col-sm-6 col-lg-4 col-xl-3">
                 <div className="form-group">
                 <label htmlFor="mergeChanceInput">
                   Merge chance (min 0 max 1): 
@@ -84,7 +85,7 @@ class Actions extends Component {
                   </small>
                 </div>
               </div>
-              <div className="col-12 col-sm-6 col-lg-3">
+              <div className="col-12 col-sm-6 col-lg-4 col-xl-3">
                 <div className="form-group">
                 <label htmlFor="mergeChanceInput">
                   Maze generation speed (ms):

src/Row.js

@@ -62,7 +62,7 @@ class Row extends Component {
       }
     }
 
-    newCell = <Cell setID={setID} walls={walls}/>;
+    newCell = <Cell setID={setID} walls={walls} key={this.currentCell}/>;
 
     this.setState({
       cells: [
@@ -84,13 +84,9 @@ class Row extends Component {
   getCellsAndHighlightCurrent() {
     return this.state.cells.map((cell, i) => {
       if (i !== this.currentCell) {
-        return <Cell setID={cell.props.setID}
-                     active={false}
-                     walls={cell.props.walls}/>
+        return <Cell {...cell.props} key={i} active={false}/>
       }
-      return <Cell setID={cell.props.setID}
-                     active={true}
-                     walls={cell.props.walls}/>
+      return <Cell {...cell.props} key={i} active={true}/>
     });
   }
 
@@ -105,9 +101,7 @@ class Row extends Component {
         return cell;
       }
 
-      return <Cell setID={currentCellSetId}
-                   active={cell.props.active}
-                   walls={cell.props.walls}/>
+      return <Cell {...cell.props} key={i} setID={currentCellSetId}/>
     });
   }
 
@@ -117,10 +111,7 @@ class Row extends Component {
       clearInterval(this.timerID);
       // remove the active style
       const cells = this.state.cells.map((cell, i) => {
-  
-        return <Cell setID={cell.props.setID}
-                     active={false}
-                     walls={cell.props.walls}/>
+        return <Cell {...cell.props} key={i} active={false}/>
       });
       this.setState({ cells });
       // tell the Maze that the row is done, so we can pass
@@ -203,7 +194,8 @@ class Row extends Component {
         bottom: false,
       }
 
-      return <Cell setID={cell.props.setID}
+      return <Cell {...cell.props}
+                   key={i}
                    active={i === this.props.width - 1 ? true : false}
                    walls={walls}/>
     });

src/index.js

@@ -30,6 +30,7 @@ class Maze extends Component {
     this.setState({
       rows: [
         <Row index={0} 
+             key={0}
              width={this.state.width}
              chanceToJoin={this.state.chanceToJoin}
              speed={this.state.speed}
@@ -53,6 +54,7 @@ class Maze extends Component {
         rows: [
           ...this.state.rows,
           <Row index={index + 1} 
+               key={index + 1}
                width={this.state.width}
                chanceToJoin={this.state.chanceToJoin}
                speed={this.state.speed}
@@ -70,7 +72,8 @@ class Maze extends Component {
         // to spread them here again
         ...this.state.rows,
         // the new row
-        <Row index={index + 1} 
+        <Row index={index + 1}
+             key={index + 1}
              width={this.state.width}
              chanceToJoin={this.state.chanceToJoin}
              speed={this.state.speed}
@@ -109,9 +112,14 @@ class Maze extends Component {
   }
 
   isFormValid() {
-    const { width, height, chanceToJoin } = this.state;
+    const { width, height, chanceToJoin, speed } = this.state;
 
-    return width && height && chanceToJoin >= 0 && chanceToJoin <= 1;
+    return (
+      width && 
+      height && 
+      chanceToJoin !== '' && chanceToJoin >= 0 && chanceToJoin <= 1 &&
+      speed !== '' && speed >= 0
+    );
   }
 
   resetMaze(e) {