title: ReactDnd drag preview - finding the right pattern
body: <p>I'm trying to implement a simple drag preview that overrides the default browser behavior, but I can't seem to find the right pattern, and the documentation refers to a simple set of examples without explaining the larger context of how layers work.</p>
  
  <p>Here's some code:  doesn't work currently -- not sure how to link it so that the preview for the dragged item shows [Item] and not for other items.  How do I make this link? What am I missing here?</p>
  
  <pre><code>import React, { Component } from 'react';
  import { DragDropContext, DragSource, DropTarget, DragLayer } from 'react-dnd';
  import HTML5Backend, { getEmptyImage } from 'react-dnd-html5-backend';
  
  const types = {
    Item: 'ITEM'
  };
  
  class Item extends Component {
    componentDidMount() {
     this.props.connectDragPreview(getEmptyImage());
    }
  
    render() {
      const { name, connectDragSource, isDragging } = this.props;
      return connectDragSource(
          &lt;div&gt;
            &lt;div&gt;
              {name}
            &lt;/div&gt;
          &lt;/div&gt;
        )
      );
    }
  };
  
  const DraggableItem = DragSource(types.Item,
    {
      beginDrag(props) {
        const { name } = props;
        return {
          name
        };
      }
    },
    (connect, monitor) =&gt; {
      return {
        connectDragSource: connect.dragSource(),
        connectDragPreview: connect.dragPreview(),
        isDragging: monitor.isDragging()
      };
    }
  )(Item);
  
  const ItemPreview = ({ item, isDragging }) =&gt; {
    if (!isDragging)
      return null;
    return (
      &lt;div&gt;[{item ? item.name : null}]&lt;/div&gt;
    )
  };
  
  const ItemLayer = DragLayer(
    monitor =&gt; {
      return {
        isDragging: monitor.isDragging(),
        item: monitor.getItem()
      };
    }
  )(ItemPreview);
  
  const Dnd = () =&gt; {
    return (
      &lt;div&gt;
        &lt;DraggableItem name="Item A" /&gt;
        &lt;DraggableItem name="Item B" /&gt;
        &lt;DraggableItem name="Item C" /&gt;
        &lt;ItemLayer /&gt;  {/* Clearly wrong. */}
      &lt;/div&gt;
    );
  };
  
  export default DragDropContext(HTML5Backend)(Dnd);
  </code></pre>
  
  <p>For what it's worth, I've found ReactDnd up to this point extremely easy to use and leverage.  It's the previewing piece that I think could benefit from further documentation, and I'm happy to add it once I have a more thorough understanding of how this all works.</p>