Warning: Failed context type: The context `dragDropManager` is marked as required in `DropTarget(ScheduleCell)`, but its value is `undefined`.

with the following…

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import ShiftItem from './ShiftItem';

import { DropTarget } from 'react-dnd';

const cellTarget = {
  drop(props, monitor, component) {
    return Object.assign(component.state, props);
  },
  canDrop(props) {
    return true;
  },
};

const collect = (connect, monitor) => {
  return {
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
  };
};

export class ScheduleCell extends Component {

  static propTypes = {
    shifts: PropTypes.object,
    positions: PropTypes.object,
    startOfWeek: PropTypes.object, // Date
  };

  renderShifts() {
    return this.props.shifts.map(shift => {
      const position = shift.position_id ? this.props.positions.get(shift.position_id) : null;
      return (
        <ShiftItem
          key={ `shift-${shift.id}` }
          shift={ shift }
          position={ position }
        />
      );
    }).toArray();
  }

  render() {
    return (
      <div className="schedule-row-cell">
        <div className="shift-holder">
          { this.renderShifts() }
        </div>
      </div>
    );
  }
}

export default DropTarget('shift', cellTarget, collect)(ScheduleCell);

am i missing something simple?

[th3fallen]

I had to do something like this export default DragDropContext(HTML5Backend)(Layout); on my layout that was wrapping the components i wanted to drag and drop on, since we use it many places i just did it on my entire applications layout component. @willluck

[nagendradarla]

You can also write a function in separate JS file as below

const dndContext = DragDropContext(HTML5Backend); export function getDragDropContext(Component) { return dndContext(Component); }

and then use this as decorator on the component which needs drag and drop context

@getDragDropContext class MyComponent extends Component { }

This is useful if MyComponent already has a default export