Translating DropTarget decorator to ES6

Question

I am going through examples of react-dnd. Something I've never used before is passing props into HOC functions using ES6 syntax.

@DropTarget(props => props.accepts, boxTarget, (connect, monitor) => ({
  connectDropTarget: connect.dropTarget(),
  isOver: monitor.isOver(),
  canDrop: monitor.canDrop(),
}))
export default class TargetBox extends Component {
  ...
}

How do I implement this using ES6 syntax? I get undefined props when I just pass it as an argument like this.

export default DropTarget(props.accepts, boxTarget, collect)(TargetBox);

Answer 1

That's a decorator and would translate to this:

export default DropTarget(props => props.accepts, boxTarget, (connect, monitor) => ({
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
    canDrop: monitor.canDrop(),
}))(TargetBox);