HOOKS!

[waynevanson]

Thanks for creating this example.

Is it possible to do nested with hooks?

I've been trying but to no avail.

[waynevanson]

From actually starting to understand how this thing works, it looks like you're referencing instances (this) which are only available on classes. I can't see any other way to make this work without using classes.

Thanks for the example!

[waynevanson]

On closer inspection, it looks like this could be done with the new hooks in a functional component. I will post an example when I figure it out. I noticed that this was only used because app/containers/index.js is a class and the functions needed to be bound. Using a store, this isn't necessary.

I do have a question, however. Where does props.id come from in this file? id is not passed as a prop to components/tree

example-react-dnd-nested/app/components/Tree.js

Lines 8 to 17 in 7c40bc8

	hover(props, monitor) {
	const {id: draggedId, parent, items} = monitor.getItem()
	if (!monitor.isOver({shallow: true})) return
	const descendantNode = props.find(props.parent, items)
	if (descendantNode) return
	if (parent == props.parent || draggedId == props.parent) return
	props.move(draggedId, props.id, props.parent)

[max-sym]

@waynevanson Hi! Were you able to solve it?

[tamagokun]

🤦 my notifications must be messed up, because this is the first i'm seeing this issue, so sorry about that!

props comes from the DropTarget hoc, though here it's being as a decorator, which should probably be undone, but oh well. If you look at DropTarget, that function is the "drop target specification" which is detailed here: https://react-dnd.github.io/react-dnd/docs/api/drop-target#drop-target-specification It will pass in the props of the component so you can control what gets dropped

[tamagokun]

Sorry, to answer your original question, props refers to the props of the particular component being dropped, not the tree itself.

[max-sym]

Thanks for your reply!

I've noticed that props.id is always undefined in line where
props.move(draggedId, props.id, props.parent) is called.

Trying to convert it to hooks now.

UPDATE: Oh ok, it's undefined only in the <Tree /> component's hover, not in the <Item />'s hover. Sorry :)

[max-sym]

Pull request!
Maybe a bit messy, but here it is: #8