Checker the board

src/index.css

@@ -42,6 +42,7 @@ ol, ul {
   margin-top: -1px;
   padding: 0;
   text-align: center;
+  outline: none;
 }
 
 .square:hover {

src/index.js

@@ -72,7 +72,6 @@ function Square(props) {
       backgroundSize: `100%`,
       backgroundColor: props.bg,
   };
-  if (props.value != null) {
     return (
       <button
         className="square"
@@ -81,14 +80,6 @@ function Square(props) {
       >
       </button>
     );
-  } else {
-    return (
-      <button
-        className="square"
-        onClick={props.onClick}
-      ></button>
-    );
-  }
 }
 
 class Board extends React.Component {
@@ -353,8 +344,10 @@ class Board extends React.Component {
   }
 
   renderSquare(i) {
+    let plainBg = (i + (Math.floor(i / 8))) % 2 === 0 ?
+      "white" : "#666";
     let bgColor = this.heldPiece() === i ?
-      "#5D98E6" : "white";
+      "#5D98E6" : plainBg;
     return (
       <Square
         value={this.state.squares[i]}