Clash Royale CLAN TAG#URR8PPP

React Beautiful Dnd : after dropping the item, source and destination indices are undefined

I'm new to react.js and trying to create a basic Drag and Drop using
react-beautiful-dnd. I'm unable to find te issue after multiple tries, below is the code, drag and drop is fine but after dropping list is not reordering basically, in onDragEnd function result.source.index and result.destination.index is undefined.

react.js

react-beautiful-dnd

list

onDragEnd

result.source.index

result.destination.index

undefined

import React from 'react';
import ReactDOM from 'react-dom'
import
DragDropContext, Droppable, Draggable
from 'react-beautiful-dnd'

//data
const getItems = (count) => Array.from(length: count, (v, k) => k).map(k => (
id: `item-$k`,
content: `item $k`
))

/** Reorder an array, moving the item at $startIndex to $endIndex. */
const reorder = (list, startIndex, endIndex) =>
const result = Array.from(list)
const [removed] = result.splice(startIndex, 1)
result.splice(endIndex, 0, removed)
return result


// inline style
const grid = 8
const getItemStyle = (dragabbleStyle, isDragging) => (
userSelect: 'none',
padding: grid * 2,
marginBotom: grid,
background: isDragging ? 'lightgreen': 'grey',
...dragabbleStyle
)
const getListStyle = (isDraggingOver) => (
background: isDraggingOver ? 'lightblue' : 'lightgrey',
padding: grid,
width: 250
)

class AppDnD extends React.Component
constructor(props)
super(props)
this.state =
items: getItems(10)



onDragEnd = (result) =>
if(!result.destination) return
console.log(result)
const items = reorder (
this.state.items,
result.source.index,
result.destination.index,
)
this.setState(items)


render()
return (
<DragDropContext onDragEnd=this.onDragEnd>
<Droppable droppableId="droppable">
(provided, snapshot) => (
<div
ref=provided.innerRef
style=getListStyle(snapshot.isDraggingOver)
>
this.state.items.map(item => (
<Draggable
key=item.id
draggableId=item.id
>
(provided, snapshot) => (
<div>
<div
ref=provided.innerRef
style=
getItemStyle(
provided.draggableProps.style,
snapshot.isDragging
)
...provided.dragHandleProps
...provided.draggableProps
>
item.content
</div>
provided.placeholder
</div>
)
</Draggable>
))
</div>
)
</Droppable>
</DragDropContext>
)



export default AppDnD;


Could someone give me a breakdown how drag and drop works in react-beautiful-dnd. My actual target is to do a drag and drop behaviour for a Table, it would be great if someone provide some points for it.

react-beautiful-dnd

1 Answer
1

I've found the solution, in <Draggable> component we need to define id=i attribute. The whole statement would look like this `

<Draggable>

id=i

react-beautiful-dnd

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.