Uncaught TypeError: Cannot read property 'left' of undefined at WithSortableContainer.animateNodes

[ashmitaggarwal]

How to get rid of this error. Due to which auto scroll also dont work.

[kishanbharda]

Same error with the latest version. @ashmitaggarwal have you solved it?

[kishanbharda]

Ok, I found the solution.

Initially, I was rendering SortableItem without any wrapper like this:

const SortableList = SortableContainer(({ items }) => {
  return items.map((value, index) => (
    <SortableItem
      key={`item-${value?._id}-${index}`}
      index={index}
      settingIndex={index}
      setting={value}
    />
  ))
});

Then I added a wrapper component around the SortableItem like below, and now it's working without error.

const SortableList = SortableContainer(({ items }) => {
  return (
    <div> // add any wrapper component
      {items.map((value, index) => (
        <SortableItem
          key={`item-${value?._id}-${index}`}
          index={index}
          settingIndex={index}
          setting={value}
        />
      ))}
    </div>
  );
});

[phamthainb]

Ok, I found the solution.

Initially, I was rendering SortableItem without any wrapper like this:

const SortableList = SortableContainer(({ items }) => {
  return items.map((value, index) => (
    <SortableItem
      key={`item-${value?._id}-${index}`}
      index={index}
      settingIndex={index}
      setting={value}
    />
  ))
});

Then I added a wrapper component around the SortableItem like below, and now it's working without error.

const SortableList = SortableContainer(({ items }) => {
  return (
    <div> // add any wrapper component
      {items.map((value, index) => (
        <SortableItem
          key={`item-${value?._id}-${index}`}
          index={index}
          settingIndex={index}
          setting={value}
        />
      ))}
    </div>
  );
});

It work 👍🏻