beautiful dnd - passing draggable data onDropEnd

Question

i have some data that is available on my draggable elements. i would like to use that data onDragEnd, but i didn't find a way to pass any draggable data excepts the draggableId which is passed into the result on the the onDragEnd event.

basically what i need is some kind of custom prop on the draggable that will show up on DragDropContext events. something like:

<>
   {cmps.map(cmp => (
       <Draggable 
           key={cmp.name}
           draggableId={cmp.name}
           index={index}
           // this is what im missing
           payload={cmp}
           // -----------------------
        >
          <Cmp/>
        </Draggable>
    )}
</>

I have the same problem. Did you find a way to pass payload? — Webfreaks, Oct 20 '20 at 01:05
sadly no, i had to make an hash-map from the ids, each id is the key of a key-value pair inside a "bank" object. and it contained the data i needed. on drop end i used the passed id to select the key from the hash-map and take the data from there. — Jordan, Oct 21 '20 at 11:07
any update on this ? did you find any answer rather then hash-map ? — Murtaza Hussain, Jan 29 '21 at 13:19

David Kerr · Answer 1 · 2022-02-05T12:21:24.833

From your example it looks like you are trying to access an item in the array as the desired payload. An individual cmp from your array of cmps.

Forgive me if I misunderstand your question but in your onDragEnd before you set the state to reorder your list data could you do something like this?

  onDragEnd(result) {
    // Access to data from list
    console.log(cmps[result.source.index]);

    // ...
  }

I forked a sandbox and added the above console log to illustrate: https://codesandbox.io/s/vertical-list-forked-qiljq?file=/index.js

beautiful dnd - passing draggable data onDropEnd

1 Answers1