react-beautiful-dnd Drag and Drop doesn't work

Question

I have used functional components to implement drag and drop in react-beautiful-dnd. I have data coming from the backend in the given format below:

[
    {
        "module_id": 66,
        "module_type": "HTML CSS",
        "module_name": "Pre-Reading",
        "duration": 50,
        "course": {
            "course_name": "Full Stack",
            "course_id": 2
        }
    },
    {
        "module_id": 67,
        "module_type": "Javascript",
        "module_name": "Pre-Reading",
        "duration": 30,
        "course": {
            "course_name": "Full Stack",
            "course_id": 2
        }
    },
    {
        "module_id": 68,
        "module_type": "Design a webpage!",
        "module_name": "Lab",
        "duration": 50,
        "course": {
            "course_name": "Full Stack",
            "course_id": 2
        }
    }
]

Please find the code here https://codesandbox.io/s/determined-darkness-8hqm9?file , the list renders properly but when I try to drag and drop, only drag works and drop doesn't. Suppose I want to shift the first HTML and CSS to last and "Design a Webpage" to first, HTML and CSS gets dragged to bottom but when I place it on the last, it again moves to the first. Please help me rectify my error. Thanks a ton in advance :)

please come with a working snippet, if you have a snippet that shows your problem clearly, it will solve your problem much faster compare to come without a snippet, in example, you can create a snippet from code sandbox — Nisharg Shah, Jan 04 '21 at 07:28
https://codesandbox.io/s/determined-darkness-8hqm9?file Here it is. Please check :) — , Jan 04 '21 at 07:44

react-beautiful-dnd Drag and Drop doesn't work

0 Answers0