2stash
commented
3 years ago @pavel-martynov Hello. The example works fine as is. Can you explain the code you used for your state? This definitely breaks the code. Follow the example and it will work. This library just facilitates drag and drop, and gives you the data you need to implement drag and drop, like source and destination indexes. But the user is responsible for managing the state, and if the state and data structure is not implemented correctly it will never work, as this library does not manage the state.
Also I copied the sample data structure from the egghead.io course on this library. I think it is easier to read and understand as the codesandbox example is harder to follow in my opinion. Here is the course, it is short and makes using this library a lot easier to follow.
https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd
// your state, not sure what the map does
state = {
items: [
{ id: 1, name: 'A' },
{ id: 2, name: 'B' },
{ id: 3, name: 'C' },
{ id: 51, name: 'D' },
{ id: 52, name: 'E' },
{ id: 59, name: 'F' },
{ id: 65, name: 'G' },
{ id: 72, name: 'H' },
{ id: 75, name: 'I' },
{ id: 79, name: 'J' }
].map((item) => {
item._id = item.id;
item.id = item-${item.id};
return item;
}),
selected: []
};
// Example State from egghead.io course const initialData = { tasks: { "task-1": { id: "task-1", content: "Take out the garbage", }, "task-2": { id: "task-2", content: "Study",rowId: "row-1" }, "task-3": { id: "task-3", content: "sleep",rowId: "row-2" }, "task-4": { id: "task-4", content: "eat",rowId: "row-3" }, }, columns: { "column-1": { id: "column-1", title: "To do", taskIds: ["task-1", "task-2", "task-3", "task-4"], }, "column-2": { id: "column-2", title: "In progress", taskIds: [], }, "column-3": { id: "column-3", title: "Done", taskIds: [], }, }, columnOrder: ["column-1","column-2", "column-3"], // for column sorting. };
export default initialData;
I'm trying to reproduce two column example using current versions of React and React-Beautiful-DnD. After first interaction (sorting inside one column or moving item to another column) React and React-Beautiful-DnD goes crazy.
https://codesandbox.io/s/vertical-list-with-multiple-drop-targets-forked-50ydn