title: elements unintentionally move on content change
body: <p>I'm learning React and JavaScript generally via writing chess game and got to some intersting issue with elements changing position depending on whether content is empty or not.</p>
  
  <p>I create simple CodePen to illustrate problem - <a href="https://codepen.io/anon/pen/KbGKrX?editors=0010" rel="nofollow noreferrer">https://codepen.io/anon/pen/KbGKrX?editors=0010</a></p>
  
  <p>Clicking on each square will change it content.
  Problem is that this square will change position, unless all squares in the same row have same content (null or text). Tried with empty strings and spaces instead null and got the same behaviour.</p>
  
  <p>Inspecting in Dev Tools I see no change of CSS so I am puzzled and not sure whether its is some strange behaviour because of React or something else.</p>
  
  <p>I would appreciate any help on this one.</p>
  
  <p>JS part:</p>
  
  <pre><code>const BoardSquare = (props) =&gt; {
    return (
        &lt;button
          className={`board-square board-square-${props.squareColor}`}
          onClick={props.onClick}
        &gt;
          {props.piece}
        &lt;/button&gt;
    );
  };
  
  const squares = new Array(8);
  for (let i = 0; i &lt; 8; i++) {
    let row = new Array(8);
    for (let j = 0; j &lt; 8; j++) {
      row[j] = {
        rowIndex: i,
        colIndex: j,
        key: (j + 10).toString(36) + (8 - i).toString(),
        color: (i + j) % 2 === 0 ? "light" : "dark",
        piece: i === 1 ? j : null
      };
    }
    squares[i] = row;
  }
  
  class Game extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        squares: squares,
        whiteMove: true
      };
    }
  
    handleClickSquare(i, j) {
      //alert("clicked:" + i + " " + j);
      const squares = this.state.squares.slice();
      squares[i][j].piece = squares[i][j].piece !== null ? null : j;
      this.setState({ squares: squares, whiteMove: !this.state.whiteMove });
    }
  
      handleClickNewGame() {
      const squares = this.state.squares.slice();
      for (let i = 0; i &lt; 8; i++) {
        squares[1][i].piece = i;
        squares[6][i].piece = i;
      }
  
      this.setState({ squares: squares, whiteMove: true });
    }
  
  
  
    render() {
      return (
            &lt;div id="board"&gt;
              {this.state.squares.map((row, rowIndex) =&gt; {
                return (
                  &lt;div&gt;{
                  row.map((square, colIndex) =&gt; {
                  return (
                    &lt;BoardSquare
                      key={square.key}
                      squareColor={square.color}
                      id={square.key}
                      piece={square.piece}
  
                      onClick={() =&gt; this.handleClickSquare(rowIndex, colIndex)}
                    /&gt;
                  );
                })}
                &lt;/div&gt;)
              })}
            &lt;/div&gt;
      )
    }
  }
  
  // ========================================
  
  ReactDOM.render(
    &lt;Game /&gt;,
    document.getElementById('root')
  );
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#board {
      font-size: 0;  
  }
  
  .board-square {
      text-align: center;
      align-items: center;
      justify-content: center;
      height: 20px;
      width: 20px;
      line-height: 20px;
      font-size: 10px;
      margin: 0;
      padding: 0;
      border: 0;
  }
  
  .board-square-dark {
      background-color: green;
  }
  
  .board-square-light {
      background-color: #E0AB76;
  }
  </code></pre>