How to access dragged object fields in react drag and drop? - reactjs

Question

So basically I'm trying to use dnd in a simple game, but i feel like i don't quite understand the point of some params. I have two components being used as a source and target. The source is receiving a unit prop from the parent and i'd like the Field component(target) to know which unit is being dragged atm and after the drop display it inside it. I've seen i can specify some fields in beginDrag(), but i think it may not be it. Is is possible or is there a workaround?
const BenchTileSource = {
beginDrag(props) {
// Return the data describing the dragged item
const item = { unit: props.unit };
return item;
}
};
const TileBackground = styled.div`
...
`;
function UnitBenchTile({ unit }) {
const [{ isDragging }, drag] = useDrag({
item: { type: TileTypes.BENCH_TILE },
collect: monitor => ({
isDragging: !!monitor.isDragging()
})
});
return unit ? (
<TileBackground ref={drag}>{unit.name}</TileBackground>
) : (
<TileBackground />
);
}
export default BenchTileSource(
TileTypes.BENCH_TILE,
BenchTileSource
)(UnitBenchTile);
import React from "react";
import styled from "styled-components";
import { connect } from "react-redux";
import { TileTypes } from "../dragTypes/TileTypes";
import { useDrop } from "react-dnd";
const mapStateToProps = function(state) {
return {
currentPosition: state.currentPosition,
unitsPositions: state.unitsPositions
};
};
...
function Field({ index, children, dispatch }) {
const unitsPositions = useSelector(
state => state.unitsPositionsReducer.unitsPositions
);
const [{ isOver }, drop] = useDrop({
accept: TileTypes.BENCH_TILE,
drop: monitor => setCurrentPosition([x, y], monitor.getItem()),
collect: monitor => ({
isOver: !!monitor.isOver(),
item: monitor.item
})
});
const setCurrentPosition = (newPosition, unit) => {
if (!unitsPositions[index].unit) {
const result = unitsPositions;
result[index] = { position: newPosition, unit: unit };
dispatch({ type: "UPDATE_UNITS_POSITIONS", result });
}
};
const isRight = (index - 9) % 10 === 0;
const isBottom = index >= 50;
const x = index % 10;
const y = Math.floor(index / 6);
if (isRight && isBottom)
return <FrameBottomRight ref={drop}>{children}</FrameBottomRight>;
else if (isRight) return <FrameRight ref={drop}>{children}</FrameRight>;
else if (isBottom) return <FrameBottom ref={drop}>{children}</FrameBottom>;
else return <Frame ref={drop}>{children}</Frame>;
}
export default connect(mapStateToProps)(Field);

Answer 1

All the information that is needed can be accessed by the monitors of react-dnd. In this case, you want to access the currently dragged source in the target so you have to make use of the DropTargetMonitor's method getItem() and it will return all the properties defined in the item property of the dragged source. No need to supply additional fields when a drag operation begins if you already have an id defined in your item, that field is enough to identify which item is being dragged.
UPDATE
if you really want to pass additional fields, you can simply merge the item data by "spreading" it to a new object together with your additional data in your begin method.
return {
...monitor.item,
additional: data
}