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>
    )}
</>

Answer 1

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