title: Get element position in the DOM on React DnD drop?
body: <p>I'm using React DnD and Redux (using Kea) to build a formbuilder. I've the drag &amp; drop portion working just fine, and I've managed to dispatch an action when an element drops, and I render the builder afterwards using state that the dispatch changed. However, in order to render elements in the correct order, I (think I) need to save the dropped elements position relative to it's siblings but I'm unable to figure out anything that isn't absolutely insane. I've experimented with refs and querying the DOM with the unique ID (I know I shouldn't), but both approaches feel pretty terrible and do not even work. </p>
  
  <p>Here's a simplified representation of my app structure: </p>
  
  <pre><code>@DragDropContext(HTML5Backend)
  @connect({ /* redux things */ })
  &lt;Builder&gt;
    &lt;Workbench tree={this.props.tree} /&gt;
    &lt;Sidebar fields={this.props.field}/&gt;
  &lt;/Builder&gt;
  </code></pre>
  
  <p>Workbench: </p>
  
  <pre><code>const boxTarget = {
    drop(props, monitor, component) {
      const item = monitor.getItem()
      console.log(component, item.unique, component[item.unique]); // last one is undefined
      window.component = component; // doing it manually works, so the element just isn't in the DOM yet
  
      return {
        key: 'workbench',
      }
    },
  }
  
  @DropTarget(ItemTypes.FIELD, boxTarget, (connect, monitor) =&gt; ({
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
    canDrop: monitor.canDrop(),
  }))
  export default class Workbench extends Component {
    render() {
      const { tree } = this.props;
      const { canDrop, isOver, connectDropTarget } = this.props
  
      return connectDropTarget(
        &lt;div className={this.props.className}&gt;
          {tree.map((field, index) =&gt; {
            const { key, attributes, parent, unique } = field;
            if (parent === 'workbench') { // To render only root level nodes. I know how to render the children recursively, but to keep things simple...
              return (
                &lt;Field
                  unique={unique}
                  key={key}
                  _key={key}
                  parent={this} // I'm passing the parent because the refs are useless in the Field instance (?) I don't know if this is a bad idea or not
                /&gt;
              );
            }
  
            return null;
          }).filter(Boolean)}
        &lt;/div&gt;,
      )
  
  
      // ...
  </code></pre>
  
  <p>Field: </p>
  
  <pre><code>const boxSource = {
    beginDrag(props) {
      return {
        key: props._key,
        unique: props.unique || shortid.generate(),
        attributes: props.attributes,
      }
    },
  
    endDrag(props, monitor) {
      const item = monitor.getItem()
      const dropResult = monitor.getDropResult()
  
      console.log(dropResult);
  
      if (dropResult) {
        props.actions.onDrop({
          item,
          dropResult,
        });
      }
    },
  }
  
  @connect({ /* redux stuff */ })
  @DragSource(ItemTypes.FIELD, boxSource, (connect, monitor) =&gt; ({
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging(),
  }))
  export default class Field extends Component {  
    render() {
      const { TagName, title, attributes, parent } = this.props
      const { isDragging, connectDragSource } = this.props
      const opacity = isDragging ? 0.4 : 1
  
      return connectDragSource(
        &lt;div
          className={classes.frame}
          style={{opacity}}
          data-unique={this.props.unique || false}
          ref={(x) =&gt; parent[this.props.unique || this.props.key] = x} // If I save the ref to this instance, how do I access it in the drop function that works in context to boxTarget &amp; Workbench? 
        &gt;
          &lt;header className={classes.header}&gt;
            &lt;span className={classes.headerName}&gt;{title}&lt;/span&gt;
          &lt;/header&gt;
        &lt;div className={classes.wrapper}&gt;
          &lt;TagName {...attributes} /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>Sidebar isn't very relevant.</p>
  
  <p>My state is a flat array, consisting of objects that I can use to render the fields, so I'm reordering it based on the element positions in the DOM. </p>
  
  <pre><code>[
    {
      key: 'field_type1',
      parent: 'workbench',
      children: ['DAWPNC'], // If there's more children, "mutate" this according to the DOM
      unique: 'AWJOPD',
      attributes: {},
    },
    {
      key: 'field_type2',
      parent: 'AWJOPD',
      children: false,
      unique: 'DAWPNC',
      attributes: {},
    },
  ]
  </code></pre>
  
  <p>The relevant portion of this question revolves around </p>
  
  <pre><code>const boxTarget = {
    drop(props, monitor, component) {
      const item = monitor.getItem()
      console.log(component, item.unique, component[item.unique]); // last one is undefined
      window.component = component; // doing it manually works, so the element just isn't in the DOM yet
  
      return {
        key: 'workbench',
      }
    },
  }
  </code></pre>
  
  <p>I figured I'd just get the reference to the element <em>somehow</em>, but it doesn't seem to exist in the DOM, yet. It's the same thing if I try to hack with ReactDOM: </p>
  
  <pre><code> // still inside the drop function, "works" with the timeout, doesn't without, but this is a bad idea
   setTimeout(() =&gt; {
      const domNode = ReactDOM.findDOMNode(component);
      const itemEl = domNode.querySelector(`[data-unique="${item.unique}"]`);
      const parentEl = itemEl.parentNode;
  
      const index = Array.from(parentEl.children).findIndex(x =&gt; x.getAttribute('data-unique') === item.unique);
  
      console.log(domNode, itemEl, index);
    });
  </code></pre>
  
  <p>How do I achieve what I want? </p>
  
  <p>Apologies for my inconsistent usage of semicolons, I don't know what I want from them. <em>I hate them.</em></p>