Cannot Assign To 'MyComponent' Because It Is Not A Variable (react-dnd Multi Drag&drop Support In ReactJS

I would like to have drag and drop at the same time using react-dnd

// ... imports ...
class MyComponent extends Component {
  render () {
    const { connectDragSource, isDragging, connectDropTarget, isOver } = this.props

    return connectDragSource(connectDropTarget(
      <div style={{ opacity: isDragging ? 0.5 : 1 }} >
        Just an example

MyComponent = DragSource('MyComponent', elementSource, (connect, 
monitor) => ({
  connectDragSource: connect.dragSource(),
  isDragging: monitor.isDragging()

MyComponent = DropTarget('MyComponent', elementTarget, connect => ({
  connectDropTarget: connect.dropTarget(),

export default MyComponent;

I found that it is possible in here. However, In my environment I get this error:

Cannot assign to 'MyComponent' because it is not a variable [.ts(2539)]

I am using TypeScript (.ts). Could this be the problem? If so, How can achieve same thing in TypeScript?



instead of trying to reassign your class name, just use new names:

class MyComponent extends ...

const MyComponent2 = DragSource(...)(MyComponent);
const MyComponent3 = DropTarget(...)(MyComponent2);
export default MyComponent3;

The only thing that matters is that you eventually export default the version you want callers to use when they import MyComponent.