Uncaught TypeError: Cannot read property 'top' of undefined(…)

Initally Dragging seems fine, i am re sorting my array and re setting the state on onSortEnd. After 1-2 drags, I am able to drag single element but all other elements in list is stuck.Other Elements does not scroll. onSortEnd: function (newProps) { var oldGroups = this.state.groups; oldGroups.move(newProps.oldIndex, newProps.newIndex); this.setState({groups: oldGroups}); },

[TimHollies]

I still haven’t reproduced it in JSFiddle - but I think I’ve found the source of the bug and the solution, in my project at least.

The issue was that components wrapped by SortableElement were being re-rendered but the wrapping SortableElement component was not. This meant that the componentWillUnmount event on SortableElement was not firing so the refs in the manager class were not being updated, resulting in the refs pointing at DOM nodes that had been removed by the re-render.

The fix was to set the key prop of the SortableElement component to a string dependent on the information displayed within the wrapped component. This means that if the data changes such that the wrapped component needs to re-render, the wrapping SortableElement will have it’s key changed causing it to re-render as well which will trigger the lifecycle events that will keep the manager class refs in sync.

[TimHollies]

So we’ve got a wrapped SortableElement:

const Card = SortableElement(MyElement);

And an array containing the data for each card which we want to map over to generate the list. React will complain if the sibling items in the list do not have a unique key set - the solution I usually use for this is to use the array index to build the key:

{cards.map((card, index) => {
  return (
    <Card
      key={`card-${index}`}
      data={card}
    />
  );
})}

However, that doesn’t work in this case. Sometimes the array index will stay the same, but the component needs to be re-rendered for react-sortable-hoc to work. If the data prop changes the wrapped component is re-rendered, but the wrapping component is not!

That’s what causes the weird behavior, all of the components whose index changed work fine - the ones where the index stayed the same no longer work. You can check out this behavior in React-Devtools.

The solution I’ve been using is to make it so that the key is dependent on the data in card. This will force react to re-render the wrapping component whenever the data changes, rather than when it’s index changes:

{cards.map((card) => {
  return (
    <Card
      key={`card-${card.title}-${card.content}`}
      data={card}
     />
   );
})}

I hope that helps 😃