Updating state in hover of dragged component and hover component

I have a DropTarget and DragSource for the same component and I need to adjust the state on hover of the component being hovered on and the component being dragged. Within hover() I need to update the state of the component being hovered on and the component being dragged.

I haven’t quite figured out a good way to do this. I can wrap this in another container component and pass props and update the state of the container being hovered on, but how do I update the state of the item being dragged at the same time?

Thank you

[cliffmeyers]

I’m needing to do essentially the same thing here: I want to highlight the top or bottom border of the item in a vertical list as the user drags above and below its vertical midpoint, to indicate whether the dropped item would be placed before or after that item.

The Drop Target spec’s hover method is called repeatedly - which is fine - as I’ve added some logic to short-circuit execution unless my position value actually changes from “above” or “below” (and vice versa). Unfortunately I don’t have a clean mechanism to update the props for the component instance passed to hover. I can’t modify the props argument nor can I set component.props - and I think that either would be a bit of a kludge even if possible.

The only way I’ve been able to make this work is

1. Pass a callback function as a prop down into my item component,
2. Invoke the callback function on props inside the hover function on the target spec
3. Update the state of my list so that the my list receives new props, such that the data object corresponding the hovered item has a flag to indicate whether above or below is active.

This isn’t really ideal since it pollutes my data model with display-only concerns I’d prefer not to mix in there.

Is there some way that hover could support a return value which are one or more props to be merged into the props for the specified component? Then I could more easily apply the styling with a component composed around my actual item component.

[evelant]

@cliffmeyers If you check out #1096 I found a somewhat more elegant (but still hack-ish) way to do it.