'How to assign two refs to same element
Here I am trying to assign React dnd "drag" ref to existing ref but it is not happening, can any one please help me.
const refs = useRef<(HTMLDivElement | null)[][]>([]);
const [{ isDragging }, drag] = useDrag(() => ({
type: ItemType.item,
collect: (monitor) => ({
isDragging: !!monitor.isDragging(),
}),
}));
for (let curRow = 1; curRow <= props.row; curRow++) {
for (let curCol = 1; curCol <= props.col; curCol++) {
columns.push(
<div
onClickCapture={() => moseHandler(curRow, curCol)}
ref={(el) => { //----------------------------->for this ref I want to assign Drag ref
refs.current[curRow] = refs.current[curRow] || [];
refs.current[curRow][curCol] = el;
}}
className="el1"
id={`${curRow}${curCol}`}
key={`${curRow}${curCol}${generateKey(curCol)}`}
>
{`${curRow}${curCol}`}
</div>
);
}
}```
Solution 1:[1]
You can use react-merge-refs
to assign react-dnd's drop
ref and the the ref you created onto the same element.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Ty Hitzeman |