React-dnd: component is null in beginDrag?

Created on 9 Sep 2016 · 5Comments · Source: react-dnd/react-dnd

The documentation says _component_ is passed to beginDrag (3rd parameter) however it seems to be null when called? Not sure if it's something I'm doing wrong. If it helps my component is both a drag source and drag target.

What I am wanting to do is get the height of my component inside beginDrag, this is not something I can derive from the props passed so I need access to the component.

wontfix

Source

willdady

👍9

Most helpful comment

Turns out the issue is DnD doesn't like stateless components :(

I changed

const SortableListItem = (props) => {

class SortableListItem extends Component {

and _component_ is now correctly passed to beginDrag. It's worth mentioning the stateless component otherwise worked as expected so was quite confused why _component_ is null in beginDrag.

It might be worth updating the beginDrag documentation to state DnD doesn't work with stateless components (assuming this can't be fixed).

willdady on 10 Sep 2016

👍30 👀1 🎉1

All 5 comments

Turns out the issue is DnD doesn't like stateless components :(

I changed

const SortableListItem = (props) => {

class SortableListItem extends Component {

and _component_ is now correctly passed to beginDrag. It's worth mentioning the stateless component otherwise worked as expected so was quite confused why _component_ is null in beginDrag.

It might be worth updating the beginDrag documentation to state DnD doesn't work with stateless components (assuming this can't be fixed).

willdady on 10 Sep 2016

👍30 👀1 🎉1

Oof, just waisted a few cycles on this too (except with the hover() callback instead). Thanks so much for posting this... I had no clue where to look next.

jmar777 on 20 Dec 2016

👍1

Ran into this just now also -- suspect the issue is stateless components have no public instance. React-dnd may need to tweak how they use refs, as receiveComponent is called with null

alextreppass on 14 Nov 2017

This just happened to me when upgrading react-redux, and DragSource wrapping a connected component directly.

Workaround: switched the order of DragSoruce and connect. :-/

Kadrian on 20 May 2019

👍3

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.