Stack Overflow
Stack Overflow

Questions tagged [react-beautiful-dnd]

Use this tag with questions related to the react-beautiful-dnd library.

React beautiful dnd is a package available on NPM, that can be used to implement drag and drop functionality in your react applications.

Use this tag for questions relating specifically to this package.

Link to react-beautiful-dnd on Github

330 questions
1
vote
1 answer

react-beautiful-dnd: destination is equal to null

Here is the thing. I'm learning to React beautiful dnd in by building a todo app. And I have set up the app as far as styling the component and writing the logic to display the todo cards. The problem is this, as I drag the card in todo to progress…
Micode
  • 115
  • 1
  • 9
1
vote
1 answer

State not updating in react with a nested object (hooks)

I've been playing with react-beautiful-dnd and hooks (very new to react) - and for some reason my state doesn't update on drag. (Edit: I know the logic only works for 'same category' drag - this isn't updating the UI either for me) Data…
Jonny Burch
  • 13
  • 3
1
vote
0 answers

React beautiful Dnd - Invariant failed: Cannot find droppable entry with id

I have a list of droppable items created with mapping a table, but when I try to add a new droppable it throws this error, Could anyone help with this problem please
T.arar
  • 111
  • 4
1
vote
0 answers

Scrolling behaviour of react-beautiful-dnd

I am using react-beautiful-dnd for my project where I have multiple columns and items to be dragged along those columns. Drag&Drop feature is working well as expected. I also have other elements in the page such as a Sidebar or header, so, in the…
atunays
  • 23
  • 2
1
vote
0 answers

React beautiful dnd first column of two not working properly - unable to find draggable with id

I've implemented react beautiful dnd into my app, however I've found that dragging items that are initialised in the first column mostly doesn't work (it sometimes works if you keep refreshing). I tried swapping my columns around and it appears the…
Steven Bendell
  • 11
  • 1
1
vote
0 answers

How to add and retrieve values from mongoDB to react drag and drop

I am a beginner for learning MERN stack. I have developed a simple todo app in react using react-beautiful-dnd. However, I am not sure on how to retrieve data from mongoDB to the specific todo list columns, such as "todo" , 'inprogress" and…
Fernando99
  • 43
  • 4
1
vote
2 answers

"Unable to find drag handle" mistake in react-beautiful-dnd

I have a list of cards that want to drag and drop. I want the user could drag and drop by pressing on the specific place (div) on the card (not the whole card). I transfer this div to the child component and add {...provided.dragHandleProps} on…
Festina
  • 327
  • 3
  • 17
1
vote
1 answer

A bit complex drag and drop with react-beautiful-dnd

I'm using react-beautiful-dnd to create a nested drag and drop. In the following example, I can DnD parents and children within parents. Demo: https://codesandbox.io/s/a-bit-complex-react-beautiful-dnd-tusln I'm trying to be able to DnD children…
anonym
  • 4,460
  • 12
  • 45
  • 75
1
vote
0 answers

I can not update some components after drag and drop

I'm trying to reorder the list of questions. the problem I'm facing is that after the drag and drop the page is not what I was expecting some fields are not changed after the re-render. before the reordering, I have and after the reordering I…
Gabin TEKAM
  • 83
  • 8
1
vote
0 answers

How to avoid an event bubbling in nested components with React DnD Beautiful Library?

I have a problem with event bubbling. I'm using React DnD Beautiful to sort a vertical list. I have a list of collections and within each collection there is a nested list of services. I can either drag and drop collections to sort them vertically…
Olga Ivanova
  • 13
  • 3
1
vote
0 answers

react-beautiful-dnd component props change don't trigger rerending

I am using react-beautiful-dnd to build a simple vertical drag and drop list, and the list is dynamic and expandable, but when I update the list passed to dnd component, but the dnd component is not re-rendered. I just assume that when button…
Sheng Zhuang
  • 647
  • 5
  • 10
1
vote
0 answers

How to pass GridList style props to GridListTile wrapped in other component

I'm having trouble with passing GridList style props that should be injected to GridListTile in map function. From what I have read and browsed so far, I found that it might be related to Composition in Material-Ui. Here is my working code without…
MasBagus
  • 41
  • 5
1
vote
1 answer

Horizontal Nested Draggable & Droppable (DND) React Component

I am looking for nested horizontal Draggable & Droppable (DND) React Component something similar like this. https://codesandbox.io/s/react-sortable-js-nested-tu8nn I even tried modifying the above using the props supported but it does not seem to…
swati arya
  • 11
  • 2
1
vote
2 answers

ReferenceError: provided is not defined

I am completely new to react and I am stuck at this for many hours. The react part works well. I am adding react-beautiful-dnd to react. I am using npm to install the react-beautiful-dnd package. No other actions have been done on the package. I am…
melvin
  • 2,571
  • 1
  • 14
  • 37
1
vote
1 answer

React how to make table container that beautiful dnd works

I have made a table with beautiful-dnd components so i can reorder rows but since i have large amount of data, i want to make a table container so I can have a scrollable fixed size table but if i add "react-table-container", drag and drop no longer…
Jaewoo Cho
  • 21
  • 1
  • 6
1 2 3
…
21 22