Stack Overflow
Stack Overflow

Questions tagged [react-dnd]

React DnD is a set of React higher-order components to help you build complex drag and drop interfaces while keeping your components decoupled.

425 questions
7
votes
2 answers

React Jest tests fails with react-dnd: SyntaxError: Unexpected token 'export'

Suffering from a weird error and currently can't get through. So When I run tests console throws: /var/www/html/node_modules/react-dnd/dist/index.js:1 ({"Object.":function(module,exports,require,__dirname,__filename,jest){export * from…
Rollin
  • 304
  • 4
  • 13
7
votes
4 answers

React DnD useDrop is not using the current state when the method is called

I'm trying to create a todo app with the functionality to drag and drop items around. I'm using React DND and had everything working so far, but when a new item is added to the list, I realized that the function called within the "drop" method in…
Jorge A. Mendoza II
  • 71
  • 1
  • 2
7
votes
5 answers

spec.type must be defined in react-dnd

I'm trying to make a Trello clone using React react-dnd. Just by entering the code below I get the error const [{ isDragging }, dragRef] = useDrag({ item: { type: "CARD" }, collect: (monitor) => ({ isDragging: monitor.isDragging(), …
Hora
  • 162
  • 1
  • 8
7
votes
0 answers

Simple tree-view with react-dnd

I'm attempting to create a simple tree-view React component with DnD enabled by react-dnd framework(?). I tried react-sortable-tree, but ditched it for reasons I can't remember now (had to customize it, but the code is too complicated for me). So…
Atmaks
  • 391
  • 3
  • 14
7
votes
6 answers

React DnD - "Cannot have two HTML5 backends at the same time."

I am trying to make a POC with Rails5, action Cable, React and Rails and React DnD. The purpose is to make an app like trello but for an recruitment process. My front is in ReactJS. I have 3 components, first, the container call "Candidates", this…
Antoine Bernard
  • 101
  • 1
  • 1
  • 5
7
votes
1 answer

React DND typescript support

I read some users mentioning that they are using this library with Typescript support, but I cannot find any documentation anywhere nor I cannot seem to make it work on my own. I am using typescript 2 and I can't manage to create a really simple…
mastrolindus
  • 573
  • 1
  • 5
  • 8
6
votes
2 answers

Access Target Drop element in React dnd

Using React Dnd v15.1.1 I need to get the target element on drop either their Id or the whole object I tried const [{ canDrop, isOver }, drop] = useDrop( () => ({ accept: ItemType, drop: (item, monitor) => addTaskToSprint(item.id,…
Hiba abdel karim
  • 122
  • 2
  • 10
6
votes
2 answers

Problems with Item Types in react dnd (Invariant Violation: item type must be defined)

i'm trying to define the Item Type when i drag a item on my own way. But somehting goes wrong if i do it that way and drag the item, it shows me "Invariant Violation: item type must be defined" after droping the item. That means i have a file with…
MisterLA
  • 91
  • 1
  • 8
6
votes
1 answer

Can't see the item that I am dragging using React-dnd

So basically, everything works fine when I am using html5 backend, but since my app is going to be used on phones as well, I needed to switch to touch backend. And when I do, everything works fine except that I don't see items that I am dragging.…
PatrickBateman92
  • 63
  • 1
  • 5
6
votes
1 answer

Multiple React-dnd jest tests "Cannot have two HTML5 backends at the same time"

I have a jest test file with a number of tests in it. import React from 'react'; import configureStore from 'redux-mock-store'; import {Provider} from "react-redux"; import renderer from "react-test-renderer"; import HTML5Backend from…
Oliver Watkins
  • 12,575
  • 33
  • 119
  • 225
6
votes
3 answers

How does react-dnd's connectDragPreview() work?

I've been reviewing the documentation and github issues and connectDragPreview still remains a mystery to me. I would like to define a custom preview for how the item appears when it is being dragged. It should function just as the example here…
mellis481
  • 4,332
  • 12
  • 71
  • 118
5
votes
1 answer

What does getHandlerId() do and how to use it?

Some of the react-dnd examples use a getHandlerId() method. For example in the simple example of a sortable list, the Card.tsx function: Collects a handlerId from the monitor object within the useDrop method collect(monitor) { return { …
ChrisW
  • 54,973
  • 13
  • 116
  • 224
5
votes
2 answers

React DnD drag item is not updating with useState

I use react-dnd together with a react maui tree. My goal is to drag multiple items at once. My approach is to store all the selected nodes from the tree in useState as an array of ids(strings). On Click on a node the state is updated and I can…
Peer
  • 189
  • 1
  • 8
5
votes
2 answers

React-Beautiful-DnD: Invariant failed: provided.innerRef has not been provided with a HTMLElement

I was following the tutorial but I unexpectedly got this error, does anyone see what is going on? Here is the full error: react_devtools_backend.js:2557 react-beautiful-dnd: A setup problem was encountered. > Invariant failed: provided.innerRef has…
cheezit97
  • 155
  • 2
  • 10
5
votes
1 answer

React-dnd multiple elements

I can make react-dnd drag easily having a single element to drag over however I have array of 4 fields I'd like to make draggable. In my example code down below it creates four boxes from mapping the array and each box has a className of 'element'.…
Robert
  • 343
  • 6
  • 16
1
2
3
…
28 29