react-beautiful-dnd move an item from one list to another

Question

I have a simple react project stackblitz with react-beautiful-dnd.

  <DragDropContext onDragEnd={onDragEnd}>
    <Droppable droppableId="droppable">
      {(provided) => (
        <div ref={provided.innerRef} {...provided.droppableProps}>
          {categories.map((category, index) => (
            <Draggable
              key={category.id}
              draggableId={category.id && category.id.toString()}
              index={index}
            >
              {(provided) => (
                <div ref={provided.innerRef} {...provided.draggableProps}>
                  <Category
                    key={category.id}
                    provided={provided}
                    category={category}
                    index={index}
                  />
                </div>
              )}
            </Draggable>
          ))}
          {provided.placeholder}
        </div>
      )}
    </Droppable>
  </DragDropContext>

List:

const categories = [
    { id: 1, name: 'Category 1' },
    { id: 2, name: 'Category 2' },
   ];

   const items = [
    { id: 1, name: 'Item 1', category: 1 },
    ...
    { id: 3, name: 'Item 3', category: 2 },
    ...

  ];

How can I implement dragging items from one category to another with changing the value of item.category ?

Answer 1

Not the most simple thing to do. I have made a minimal working exmple, base on yours.

https://stackblitz.com/edit/react-1j37eg?file=src/App.js

Essentially 2 things needed to be changed 1: not using state 2: only using one Droppable

I added some links to info on react state as I am unsure what you know about it.

As an aside I think that react-beutiful-dnd is no longer being activly maintained and I would reccommend https://dndkit.com/ which has excellent documentation.

Hope this helps you!