React Beautiful Drag and Drop not work for me

Question

Why this code not work form me. I can't understand. I try to learn react-beautiful-dnd. This is my code:

Column.jsx

import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";

const Column = () => {
  const itemList = [
    { id: "1", task: "Pierwszy element" },
    { id: "2", task: "Drugi element" },
    { id: "3", task: "Trzeci element" },
    { id: "4", task: "Czwarty element" },
    { id: "5", task: "Piąty element" },
    { id: "6", task: "Szósty element" },
  ];

  return (
    <DragDropContext>
      <div className="border-4 border-base-300 bg-base-300 mx-auto mt-2 w-[500px] rounded-md font-sans">
        <h1 className="text-center p-1 text-lg font-bold">
          Drag and drop list
        </h1>
        <Droppable droppableId="characters">
          {(provided) => (
            <ul
              className="bg-base-300 characters"
              {...provided.droppableProps}
              ref={provided.innerRef}
            >
              {itemList.map((item, index) => {
                return (
                  <Draggable key={item.id} draggableId={item.id} index={index}>
                    {(provided) => (
                      <li
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                        className="font-sans p-3 text-[15px] my-2 last:my-0 bg-base-200"
                      >
                        {item.task}
                      </li>
                    )}
                  </Draggable>
                );
              })}
              {provided.placeholder}
            </ul>
          )}
        </Droppable>
      </div>
    </DragDropContext>
  );
};

export default Column;

If i try drag item, i have error. I can't find the solution. Result if i try drag item

Please help me, where i have error?

Answer 1

I can't tell which version you are using. But I had the same issue after updating to react v18 where I needed to disable strict mode. But it could be fixed by now I don't know, maybe dive into the GitHub repo and search for that issue to find more information.

But as a quick fix, either remove

<React.StrictMode>

from your components.

Or if you are using nextJS, change that line inside your next.config.js

module.exports = {
  reactStrictMode: false,
}