monitor.isDragging() throws error in collect function
See original GitHub issueDescribe the bug Hello, banging my head around this problem for half of the day already. Any help very appreciated
monitor.isDragging() throws error
My DragSource looks like that
const ResizeHandler = DragSource(
"RESIZE_TYPE",
{
beginDrag: ({id}) => ({id}),
endDrag: (props, monitor) => {
console.log(props, monitor.getDifferenceFromInitialOffset().x);
},
},
(connectDnd, monitor) => ({
connectDragSource: connectDnd.dragSource(),
isDragging: monitor.isDragging(), // fatal here
}),
)(({isDragging, connectDragSource}: {isDragging: boolean, connectDragSource: Function}) => (
connectDragSource(
<div
className={styles.resizeHandler}
style={{
background: isDragging ? `blue` : null,
}}
/>,
)
));
And at the moment of calling monitor.isDragging() everything fails as it doesn’t have sourceId (equals to null).
Context is created by using DragDropContext(backend) and for backend is used some extended version of https://github.com/zyzo/react-dnd-mouse-backend
Expected behavior monitor.isDragging() should work without exceptions
Screenshots If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
- OS: Mac OS 10.14.3
- Browser: chrome 72.0.3626.121 (Official Build) (64-bit)
- Version: 7.3.1
Additional context Add any other context about the problem here.
Thanks in advance
Issue Analytics
- State:
- Created 5 years ago
- Comments:10 (4 by maintainers)
Top Results From Across the Web
React DND, connectDragSource not a function error
I've fixed my issue, by switching everything over from ES6 to ES5 Syntax. Really weird, but it worked, see code below:
Read more >gaearon/react-dnd - Gitter
Inside of my DropTarget drop() function, monitor.getItem() is an empty ... I'm getting this error: "Error: Cannot have two HTML5 backends at the...
Read more >Drag and Drop in React. Using react-dnd | by Sean LaFlam
In my case, the collectedProps item, becomes the isDragging prop which is provided as a property of monitor. Next, the drag reference ...
Read more >How to use the react-dnd.useDrop function in react-dnd | Snyk
getBoundingClientRect() // Get vertical middle const hoverMiddleY ... reference = useRef(null); const [{isDragging}, drag] = useDrag({ item: {id: props.id, ...
Read more >How to implement drag and drop in React with React DnD
Display an image preview; Reorder images with drag and drop; React drag and drop ... The onDrop function is enclosed in a useCallback...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Oh right, that’s a known issue. I’ll spend some time on that today
On Mon, Mar 11, 2019, 9:39 AM Mikhail Yermolayev notifications@github.com wrote:
What a PITA, I’m glad you found the issue though. Thanks @MikeYermolayev !