layoutItem is undefined `onDrop`

I have an onDrop function, which is nearly identical to the example:

function onDrop(layout, layoutItem, _event) {
	console.log(layout, layoutItem, _event)
	alert(`Dropped element props:\n${JSON.stringify(layoutItem, ['x', 'y', 'w', 'h'], 2)}`)
}

I have my draggable element:

<div className="toolbox-draggable-button"
	draggable={true}
	unselectable="on"
	// this is a hack for firefox
	// Firefox requires some kind of initialization
	// which we can do by adding this attribute
	// @see https://bugzilla.mozilla.org/show_bug.cgi?id=568313
	onDragStart={e => e.dataTransfer.setData('text/plain', '')}>
		Text here
</div>

Whenever onDrop is called, layoutItem is undefined, and I’d like to integrate this into my app so that when a user drags the element onto it, it actually makes an element drop in, but I can’t even get to that point if layoutItem returns undefined.

[nickjpanella]

This seems to be the culprit - line below has a layout and a find function, but when it comes to ResponsiveGrid, layout is not an array, its an object with defined breakpoints. https://github.com/react-grid-layout/react-grid-layout/blob/5126e7be9a1e38053e078f2b17e1a0f3a7abcda0/lib/ReactGridLayout.jsx#L753

[joegrenan]

@joegrenan did you manage to solve this? I’m having the same problem.

Edit: Strangely enough, when I remove the onLayoutChange callback, the layoutItem is set correctly in the onDrop callback.

Interesting, so in order for the onDrop to work, I have to give up on saving the layout to LocalStorage, or otherwise. Good find!

I wish I could say I’d figured it out, but alas, not yet. Let me know if you find a fix.