react question

gistfile1.txt

// I'd like to make an API call via a `moveFrameCallback` function when a dnd event happens & here's the code:

    componentDidMount: function () {
      var container = React.findDOMNode(this),
      drake = ReactDragula([container], {
        moves: function (el, source, handle, sibling) {
          // there are some items in the list of children associated with this container
          // which should not be draggable. Identifying these by their class name feels
          // somewhat wrong (shouldnt be reaching into the DOM to understand a child's state?).
          return el.className !== 'draggable';
        },
        direction: 'horizontal'
      });
      drake.on('drop', (el, target, source, sibling) => {
        // how to I convert the DOM `el` here into the corresponding child item
        this.props.moveFrameCallback(item.id);
      });
    }

Keeping the draggable state in the dom mstm. You probably also want a data- attribute in there with your entity's id for use in the callback.

You've already chosen to leave the 'react' way of dom manipulation / event handling when you delegated them to a third party library. Trying to translate things back into react component states / identifiers is extra mental overhead that doesn't buy you anything.

fwiw, react apps need not do things 'the react way' all the time. DnD, especially, is not a thing i would want to spend much time doing 'the react way'. If you are interested, though, kentwilliam has a really clean example