Question 73292 in Reactjs Question posted in
The new location for the React Documentation can be found here.

React Beautiful Drag and Drop not work for me – Reactjs

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?

Tags:

2

Answers


  1. 0

    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,
}
    Login or Signup to reply.
  2. 0

    This issue is happening due to React.Strict mode and might be an development issue
    however you can render the Draggable with if logic block and render that component as a child of

    e.g

    const DragComp = () =>{
    const [enabled,setEnabled] = useState(false);
   
React.useEffect(()=>{
    const animation = requestAnimationFrame(() => setEnabled(true));

return () => {
       cancelAnimationFrame(animation);
       setEnabled(false);
    };
},[]);

    if(!enabled){
        return null;
    }
return (
<Draggable {...dragProps} >
{props.children}
</Draggable>
)
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search