Issue with dynamic amount of swapy slots and items

[yanuu1337]

Hey!
I would like to start this issue with how much I love the library. Really, the possiblities for it are endless.
I have one issue though. I'm building a page for an app that allows you to create forms with questions. I tried building the page as simple as it gets to see if it works.
This is my code:

const [questions, setQuestions] = useState<Question[]>([
    { id: 1, title: "", type: null, index: 1 },
    { id: 2, title: "", type: null, index: 2 },
    { id: 3, title: "", type: null, index: 3 },
  ]);
  const swapyRef = useRef<ReturnType<typeof createSwapy> | null>(null);

  const [isDragAndDropEnabled, setIsDragAndDropEnabled] = useState(false);
  useEffect(() => {
    if (!isDragAndDropEnabled) {
      swapyRef.current = null;
      return;
    }
    const container = document.querySelector(".container")!;
    swapyRef.current = createSwapy(container);
    swapyRef.current.onSwap(({ data }) => {
      const obj = data.array;
      console.log(obj);
      // Update the questions state based on the current order from swapy
      setQuestions((prevQuestions) => {
        const updatedQuestions = [...prevQuestions];

        // Update question order based on Swapy's data array
        obj.forEach((id, newIndex: number) => {
          const questionIndex = updatedQuestions.findIndex(
            (q) => q.id === parseInt(id.item!),
          );

          if (questionIndex !== -1) {
            updatedQuestions[questionIndex] = {
              ...updatedQuestions[questionIndex],
              index: newIndex + 1,
            };
          }
        });

        // Sort updatedQuestions by the new index to maintain order
        return updatedQuestions.sort((a, b) => a.index - b.index);
      });
    });

  }, [isDragAndDropEnabled]);

// [...]
 return (
 {/* [...] */}
 <div className="container flex w-full max-w-lg flex-col gap-1 p-3">
        {questions.map((question) => (
          <div
            key={question.id}
            className="flex-1"
            data-swapy-slot={question.index}
          >
            <QuestionElement
              index={question.index}
              question={question}
              onTitleChange={handleTitleChange}
              onTypeChange={handleTypeChange}
              onDelete={handleQuestionDelete}
            />
          </div>
        ))}
      </div>
     {/* [...] */}
 )

I know it looks a bit wonky, but it's because I've tried everything to make this work.
When using this code and adding a new slot and item, I get a weird error.

Weirdly enough, this behavior only happens when I'm trying to update the questions state. If I remove the whole "logic" from the onSwap handler and put a simple console.log there, and proceed to add the slots and move them around, everything works just great.
What could be causing this issue?

For the reference, I don't need really need the isDragAndDropEnabled state and the swapy ref, but without it everything falls to pieces as soon as I touch one of the items.

I would love to get some insight or some tips on how to resolve this issue; unless I'm just dumb and there's something I'm clearly doing wrong. Let me know, thanks!

[TahaSh]

Hi @yanuu1337, thank you! I'm currently working on a solution for dynamic changes in frameworks. I'll let you know when it's ready.

[TahaSh]

@yanuu1337 Dynamic slots and items are now ready in Swapy v0.2.0. Check out this React example.

Here's a video showing you how to use it: https://www.youtube.com/watch?v=w5Vk63Yuytg