monitor.getDropResult() return null - reactjs

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.