monitor.getDropResult() return null

Question

monitor.getDropResult() returns null (I look it console.log). It should return object(dragged item) with its position. Why does it return null?

I signature my component with DragSource,DropTarget..but it still returns null

Here is my entire component code:

import React, { PropTypes } from 'react';
import { DragSource } from 'react-dnd';
import { getEmptyImage } from 'react-dnd-html5-backend';

import { StoneConstants, StoneTypes, ItemTypes } from 'constants/AppConstants';
import OkeyStoneBase from 'components/OkeyStoneBase/OkeyStoneBase';

import './_OkeyStone.scss';

function checkForDragAction(props) {

  // TODO receive the action via prop
  if (props.stoneType === StoneTypes.ON_WITHDRAW_MIDDLE) {
    props.onWithdrawMiddle();
  } else if (props.stoneType === StoneTypes.ON_DISCARD_WEST) {
    props.onWithdrawLeft();
  }
}

function applyDropResult(props, result) {

  if (props.stoneType === StoneTypes.ON_WITHDRAW_MIDDLE || props.stoneType === StoneTypes.ON_DISCARD_WEST) {
      if (result === null) { //taşı tahtaya koymadıysa

      }
      props.withdrawRequestAtPosition(result.top, result.left);
  }

  if (props.stoneType === StoneTypes.ON_RAKE) {
    if (result && result.stackType === StoneTypes.ON_DISCARD_SOUTH) {
      props.onDiscardStone({
        id: props.id,
        number: props.number,
        color: props.color
      });
    }
  }
}

const stoneSource = {
  canDrag(props) {
    return props.draggable;

  },

  beginDrag(props) {
    if (props.onBeginDrag) {
      props.onBeginDrag();
    }

    checkForDragAction(props);
    return {
      id: props.id,
      stoneType: props.stoneType,
      left: props.left,
      top: props.top,
      color: props.color,
      number: props.number
    };
  },

  endDrag(props, monitor) {
    if (props.onEndDrag) {
      props.onEndDrag();
    }
    console.log(props.onEndDrag);
    console.log(monitor);

    ***var result = monitor.getDropResult();***
    console.log('stoneSource'+result);

    applyDropResult(props, result);
  }
};

function collect(connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview(),
    isDragging: monitor.isDragging()
  };
}

function getStyles(props) {
  const scale = StoneConstants.MINI_SCALE;
  let { left, top, isDragging, isMini } = props;
  const { zIndex } = props;
  const { canTransition } = props;

  let transform = `translate3d(${left}px, ${top}px, 0)`;

  if (isMini) {
    transform += ` scale(${scale}, ${scale})`;
  }

  let result = {
    transformOrigin: 'top left',
    transform: transform,
    WebkitTransform: transform,

    zIndex: zIndex,
    opacity: isDragging ? 0 : 1,
    height: isDragging ? 0 : ''
  };

  if (isDragging || !canTransition) {
    result.transition = 'none';
  }

  return result;
}

class OkeyStone extends React.Component {

    handleStoneClick (e) {
    const { id, onClicked } = this.props;
    if (onClicked) {
      e.stopPropagation();
      onClicked(id);
    }
  }

  componentDidMount() {
    this.props.connectDragPreview(getEmptyImage(), {
      captureDraggingState: true
    });
  }

  render() {
    let { connectDragSource } = this.props;
    let { number, color } = this.props;
    let { isStable, isSelected } = this.props;

    let stableStyle = isStable ? 'okey-stone-stable' : '';

    return connectDragSource(
      <div className={'okey-stone-parent ' + stableStyle}
           onClick={this.handleStoneClick}
           style={getStyles(this.props)}>
        <OkeyStoneBase number={number} color={color} isSelected={isSelected}/>
      </div>
    );
  }
}

OkeyStone.propTypes = {
  connectDragSource: PropTypes.func,
  connectDragPreview: PropTypes.func,
  isDragging: PropTypes.bool,
  id: PropTypes.number,
  left: PropTypes.number,
  top: PropTypes.number,
  stoneType: PropTypes.string,
  isStable: PropTypes.bool,
  isMini: PropTypes.bool
};

export default DragSource(ItemTypes.STONE, stoneSource, collect)(OkeyStone);

Answer 1

You need to create a DropTarget and define a drop() function within its source, and whatever that returns will be what is returned by the monitor.getDropResult() function inside of the DragSource's endDrag() function (per http://gaearon.github.io/react-dnd/docs-drag-source-monitor.html). I'm not sure what you'd like the component itself to look like, but if you created a DropTarget with a drop function resembling:

const stoneDropSource = {
  drop(props, monitor) {
    return monitor.getItem();
  },
}

Then that is what you would receive from calling getDropResult() in the endDrag() function.