import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { DropTarget } from 'react-dnd';

import Square from '../components/square';

const dropTarget = {
  drop(props) {
    
  }
};

function collect(connect, monitor) {
  return {
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver()
  };
}

class DropSquare extends Component {
  render() {
    const { connectDropTarget, isOver, number } = this.props;
    let fill = 'blanchedalmond';

    if (number) {
      fill = isOver ? 'red' : 'sienna';
    }

    return connectDropTarget(
      <div>
        <Square number={ number } fill={ fill }>
          { this.props.children }
        </Square>
      </div>
    );
  }
}

DropSquare.propTypes = {
  connectDropTarget: PropTypes.func.isRequired,
  isOver: PropTypes.bool.isRequired,

  // number of square, if white, then null 
  number: PropTypes.number,
};

export default DropTarget('PIECE', dropTarget, collect)(DropSquare);

@@ -198,16 +198,86 @@
  %7B%0A    %0A
+  %7D, %0A  canDrop(props, monitor) %7B%0A    return props.children === null;%0A
   %7D%0A%7D;%0A%0A
@@ -397,16 +397,50 @@
 isOver()
+, %0A    canDrop: monitor.canDrop(),
 %0A  %7D;%0A%7D%0A
@@ -528,16 +528,25 @@
  isOver,
+ canDrop,
  number 
@@ -633,16 +633,27 @@
  isOver 
+&& canDrop 
 ? 'red' 
@@ -950,16 +950,54 @@
 equired,
+%0A  canDrop: PropTypes.bool.isRequired,
 %0A%0A  // n

Add canDrop to not highlight not empty squares