react-dnd: Drag source is not rendering at all

Describe the bug Component decorated with DragSource is not rendered at all (render function is not called)

To Reproduce Write such component:

import * as React from "react";
import styled from "styled-components";
import {
  DragSource,
  DragSourceConnector,
  DragSourceMonitor,
  ConnectDragSource
} from "react-dnd";

const ImageHolder = styled.div`
  margin: 10px;
  max-width: 200px;
  width: 200px;
  min-height: 100px;
  position: relative;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
`;

const ImageNameHolder = styled.div`
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 13px;
`;

interface Props {
  imagePath: string;
  connectDragSource?: ConnectDragSource;
  isDragging?: boolean;
}

@DragSource<Props>(
  "image",
  {
    beginDrag: (props: Props) => props.imagePath
  },
  (connect: DragSourceConnector, monitor: DragSourceMonitor) => ({
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
  })
)
export class PhotosBrowserPhoto extends React.Component<Props> {
  render() {
    const { imagePath, connectDragSource } = this.props;
    console.log({ connectDragSource });
    return connectDragSource(
      <div>drag me</div>
    );
  }
}

Expected behavior Draggable component with drag me text, connectDragSource printed in the console

Actual behavior Nothing is rendered at all, console is empty

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 5
Comments: 15 (1 by maintainers)

Commits related to this issue

fix: throw error when a DragSource or DropTarget is rendered outside DragDropContext (#1132) (#1286) Previously the HOC's would just return null, leading to "missing" components, with nothing pointin... — committed to react-dnd/react-dnd by jeppester 5 years ago
fix: throw error when a DragSource or DropTarget is rendered outside DragDropContext (#1132) (#1286) Previously the HOC's would just return null, leading to "missing" components, with nothing pointin... — committed to react-dnd/react-dnd by jeppester 5 years ago

Most upvoted comments

I had to add the provider as shown below:

import HTML5Backend from 'react-dnd-html5-backend'
import { DragDropContextProvider } from "react-dnd";

<DragDropContextProvider backend={HTML5Backend}>
 <App/>
</DragDropContextProvider>

+22

theoutlander on Oct 2, 2018

Adding provider component in root of my app solved the issue.

I think however - it should be clearly noted in example code that it’s needed - I thought seeing example is enough to understand how to start using library

+19

pie6k on Oct 2, 2018

This isn’t anywhere in the Quick Start section of the docs.

This is practically the first thing that ought to be in the docs…

kylebebak on Feb 19, 2019

I think the problem is this if-statement: https://github.com/react-dnd/react-dnd/blob/934efc81871f30c6038e2dc52be1504fe38132e7/packages/react-dnd/src/decorateHandler.tsx#L210

It looks like it disables a check that would otherwise throw an error if there’s no context.

jeppester on Sep 24, 2018

Same thing is happening to me, though I’m using ES6 syntax:

import React, { Component } from "react";
import { DragSource } from "react-dnd";
import PropTypes from "prop-types";

import "./Dictionary.css";

const propTypes = {
  entry: PropTypes.object.isRequired,

  // Injected by React DnD:
  isDragging: PropTypes.bool.isRequired,
  connectDragSource: PropTypes.func.isRequired
};

const TYPES = {
  ROW: "row"
};

/**
 * Implements the drag source contract.
 */
const rowSource = {
  beginDrag(props) {
    console.log(props);
    return {
      entry: props.entry
    };
  }
};

/**
 * Specifies the props to inject into your component.
 */
function collect(connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
  };
}

class Row extends Component {
  constructor(props) {
    console.log("here");
    super(props);
    this.state = {
      entry: props.entry
    };
  }

  static getDerivedStateFromProps = (props, state) => {
    return {
      entry: props.entry
    };
  };

  render() {
    const { isDragging, connectDragSource } = this.props;
    const { entry } = this.state;

    console.log("dragging:", isDragging);
    return connectDragSource(
      <div style={{ opacity: isDragging ? 0.5 : 1 }} className="row">
        <div>{entry.string}</div>
        <div>{entry.kMandarin}</div>
        <div>{entry.kDefinition}</div>
      </div>
    );
  }
}

Row.propTypes = propTypes;

export default DragSource(TYPES.ROW, rowSource, collect)(Row);

Using:

    "react-dnd-html5-backend": "^5.0.1",
    "react-dom": "^16.5.1",

Expected: see rendered component and console logs Actual: nothing is rendered; nothing is logged

mvincent7891 on Sep 16, 2018