React-Dropzone, useState & dnd-kit struggles
What I want to achieve is the ability to drag image previews to change the order of the images, ie. something like this: https://codesandbox.io/s/dndkit-sortable-image-grid-py6ve?file=/src/App.jsx
The images & their preview come from a react-dropzone component. There is a solid chance this is irrelevant to my issue but mentioning it to be sure.
My initial plan was to have a state in the react-dropzone component inside of the
onDrop: that will populate the useState into the following shape: { id: number, src: File }. This approach is similar to the example in the first codesandbox. but I don't see how I can do this without a useEffect, which feels overkill since this is really close to what I want to achieve: https://github.dev/HamedBahram/dropzone
here is a sandbox to better illustrate the situation: https://codesandbox.io/s/mystifying-germain-cs1hsl?file=/src/App.tsx
Look at the block comment inside onDrop:clauderic
CodeSandbox
dndkit-sortable-image-grid - CodeSandbox
dndkit-sortable-image-grid by clauderic using @dnd-kit/core, @dnd-kit/sortable, react, react-dom, react-scripts
0 Replies