How to update the Item State ?

[kkroeger93]

Hey there,

I'm currently trying to use the Sortable hook.

So far I did achieved to make everything draggable the way I like, unfortunately somehow its not possible for me to update the state which provides all the items.

Attached you can find also an example of my code.

I'm glad for every suggestion to solve my Problem :)

 
import React, { useState } from "react";
import "./styles.css";
import { DndContext } from "@dnd-kit/core";
import { arrayMove, SortableContext, useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";

function SortableItem({ item }) {
  const { id, name } = item;
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition
  } = useSortable({ id: id });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition
  };

  return (
    <li ref={setNodeRef} style={style} {...attributes} {...listeners} draggable>
      Movement for {name}
    </li>
  );
}

export default function App() {
  const [items, setItems] = useState([
    { id: 1, name: "Items One" },
    { id: 2, name: "Item 2" },
    { id: 3, name: "Items 3" }
  ]);

  const handleDragEnd = (event) => {
    console.log(event);
    const { active, over } = event;

    if (active.id !== over.id) {
        setItems((items) => {
            console.log(items);
            const oldIndex = items.indexOf(active.id);
            const newIndex = items.indexOf(over.id);
            const newItemsArray = arrayMove(items, oldIndex, newIndex);
            return newItemsArray;
        });
    }
};

  console.log(items);

  return (
    <div className="App">
      <h1>Sorting Example</h1>

      <DndContext onDragEnd={handleDragEnd}>
        <SortableContext items={items}>
          {items.map((item) => (
            <SortableItem key={item.id} item={item} />
          ))}
        </SortableContext>
      </DndContext>
    </div>
  );
}

[clauderic]

This logic will always return -1:

const oldIndex = items.indexOf(active.id);
const newIndex = items.indexOf(over.id);

This is because your items array contains objects and not strings. Use findIndex instead:

const oldIndex = items.findIndex(item => item.id === active.id);
const newIndex = items.findIndex(item => item.id === over.id);

https://codesandbox.io/s/vigorous-mountain-rd1fm?file=/src/App.js

[kkroeger93]

You Sir, saved my Day :) Thanks Claudéric.

[Messa1]

Nice - Thanks

[dev-xo]

Saved me @clauderic ! Thank you!

[khawaja-Faizan]

Thank you this was really helpful.