having this issue with react-beautiful-dnd
on my reactjs page.
I’ve gotten my code from here with some minor changes to the content of each "dragable"
/"row"
Issue
Update: This issue happens when I try to drag my row
Data
questions
is equal to
JavaScript
x
13
13
1
[
2
{
3
"id": 499,
4
"type": "text",
5
"text": "T1",
6
},
7
{
8
"id": 500,
9
"type": "text",
10
"text": "How are you doing?",
11
}
12
]
13
UI
Code
JavaScript
1
59
59
1
<TableContainer component={Paper}>
2
<Table sx={{ minWidth: 650 }} aria-label="simple table">
3
<TableHead>
4
<TableRow>
5
<TableCell align="left"><strong>Title</strong></TableCell>
6
<TableCell align="left"><strong>Question Type</strong></TableCell>
7
<TableCell align="left"><strong>Recommend Answer Duration</strong></TableCell>
8
<TableCell align="left"><strong>Actions</strong></TableCell>
9
</TableRow>
10
</TableHead>
11
<DragDropContext onDragEnd={onDragEnd}>
12
<Droppable droppableId="droppable">
13
{(provided, snapshot) => (
14
<tbody
15
{provided.droppableProps}
16
ref={provided.innerRef}
17
>
18
<TableRow>
19
<TableCell component="th" scope="row">
20
<button className="questions-add-question-button">+ Add Question</button>
21
</TableCell>
22
<TableCell align="left">-</TableCell>
23
<TableCell align="left">-</TableCell>
24
<TableCell align="left"></TableCell>
25
</TableRow>
26
{questions.map((question:any, index) => (
27
<Draggable key={question.id.toString()} draggableId={question.id.toString()} index={index}>
28
{(provided, snapshot) => (
29
<TableRow
30
ref={provided.innerRef}
31
{provided.draggableProps}
32
{provided.dragHandleProps}>
33
<TableCell component="th" scope="row">
34
{question.text}
35
</TableCell>
36
<TableCell align="left">{question.type}</TableCell>
37
<TableCell align="left">{question.recommend_answer_duration} Second(s)</TableCell>
38
<TableCell align="left">
39
<DropDown
40
text="Actions"
41
buttons={
42
<>
43
<button>Delete</button>
44
</>
45
}
46
/>
47
</TableCell>
48
</TableRow>
49
)}
50
</Draggable>
51
))}
52
{provided.placeholder}
53
</tbody>
54
)}
55
</Droppable>
56
</DragDropContext>
57
</Table>
58
</TableContainer>
59
Advertisement
Answer
Solution / Fix
All I needed to do was to change the following
Change the droppable id to something more unique
<Droppable droppableId="question-drag-and-drop">
set the draggable id to something more unique
<Draggable key={`drag-id-${question.id.toString()}`} draggableId={`drag-id-${question.id.toString()}`} index={index}>
I also had to remove the React’s StrictMode