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
0
votes
1 answer

Apollo cache.modify update slower than setState while using in React Beautiful Drag and Drop

I'm fetching a query, and modifying the order of the list in it, using cache.modify on the drag end. This does modify cache, as it should but, it takes milliseconds to do that. How to reproduce the issue: I'm using react beautiful dnd, to make…
user13172816
0
votes
1 answer

How do I maintain the new order of my items after I use drag and drop and refresh the page?

I'm using this drag and drop library to be able to reorder a list of articles on my page: https://github.com/atlassian/react-beautiful-dnd However, even though I'm able to drag them up and down and re-order them, when I refresh the page they go back…
cldev
  • 671
  • 8
  • 18
0
votes
0 answers

react-beautiful-dnd Drag and Drop doesn't work

I have used functional components to implement drag and drop in react-beautiful-dnd. I have data coming from the backend in the given format below: [ { "module_id": 66, "module_type": "HTML CSS", "module_name":…
user14854089
0
votes
1 answer

Unable to get data from GetMapping - Class Components

I have a class component wherein the data is fetched from the backend and it should render it on the frontend. I have used drag and drop feature of react-beautiful-dnd. Can someone please tell where am I going wrong. Nothing gets rendered. Thank you…
user14854089
0
votes
1 answer

Draggables grouped together on drag

I'm using the react-beautiful-dnd library to enable drag and drop functionality for lists, but I'm having trouble dropping the elements. Sometimes some of the draggables group together, and I can't drop anything between them. It looks like all of…
jamiemcg10
  • 46
  • 4
0
votes
1 answer

React-beautiful-dnd - Dynamic to-do, with possibility to add items trought a form

How can I let my To-do dynamic, with the possibility to add items trought a form? This is is my list: const initialData = { tasks: { 'task-1': { id: 'task-1', content: 'Org.Internacionais' }, 'task-2': { id: 'task-2', content:…
Gabriel Andrade
  • 17
  • 1
  • 5
0
votes
1 answer

Typescript Object is possibly 'undefined' after check

Quick question - why Typescript still thinks it will be undefined? When added code below to my application I have Typescript Error on line draft.splice(result.destination.index, 0, draggedItem); saying that result.destination Object is possibly…
tommybernaciak
  • 390
  • 2
  • 17
0
votes
0 answers

i want to swap 2x2 matrix elements using beautiful-dnd ,but when i map them them it makes 2 colum

I want to swap two arrays item using dnd or beautiful dnd I need help with it const [state, setState] = useState([ ["1", "2"], ["3", "4"], ]); here's my code when I map it creates tow columns and in each column, it shows 2 elements, there are…
Malik Iqbal
  • 1
  • 1
0
votes
2 answers

ReactJS - Page re-renders but one component stays the same. (Beautiful Drag&Drop)

I'm having a very weird issue where just one component on a page is not being refreshed, and I just can't figure out why. Here's a short video of the problem: https://i.gyazo.com/45e229b0867c37e48a18da7a55afb522.mp4 Notice how the question string…
SJ19
  • 1,933
  • 6
  • 35
  • 68
0
votes
1 answer

How to get the correct build of react-beautiful-dnd library?

I did a fork for react-beautiful-dnd github project and I added some features but when I build my fork using yarn run build and use the new dist in my project I get a compile…
Taha
  • 1,072
  • 2
  • 16
  • 29
0
votes
1 answer

typescript type error when passing through snapshot in react-beautiful-dnd

I am trying to use react-beautiful-dnd to create a very simple draggable list of elements. When I try to use snapshot and assign the value of snapshot.isDragging, I get an error. I then attempted to just give it a bool in general, was still getting…
Daniel
  • 1,392
  • 1
  • 5
  • 16
0
votes
1 answer

How can I Rearrange items in an array of objects without an index

I have an object array That is in this format sampleItemDetail: [ { type: 'Take out the garbage', isBox1: true }, { type: 'Watch my favorite show', isBox1: true }, { type: 'Charge my phone', …
Kimaya
  • 1,210
  • 4
  • 14
  • 33
0
votes
1 answer

.map() is not a function when state is updated in Context

When updating the state, I'm getting the following error message noteList.map is not a function I have the following setup src/pages/index.js Where my DragDropContainer is being mounted const Index = ({ data, location }) => { // instantiate a map…
alberto_g
  • 39
  • 10
0
votes
2 answers

React-Beautiful-Dnd Can't Find Draggable Element with Id

I'm trying to replicate the react-beautiful-dnd tutorial step 4: reorder a list. I've copied the code in the tutorial as far as I can see exactly: https://egghead.io/lessons/react-reorder-a-list-with-react-beautiful-dnd However, when I run react and…
Elliptica
  • 3,928
  • 3
  • 37
  • 68
0
votes
1 answer

how to access ref and programatically scroll in react-beautiful-dnd

What i want to achieve: programatically scroll in react-beautiful-dnd droppable column if it was a simple react div, i could: const myref = useRef(null) const executeScroll = () => { myref.current.scrollLeft = 1500; } return(
Julliard
  • 523
  • 1
  • 6
  • 23
1 2 3
…
21 22