react beautiful DnD not making me drag and drop

Question

I have a React app where I'm using react-beautiful-dnd to implement a drag and drop feature. I have a list of items (image, button, and TextView) that I want to make draggable and droppable. I have defined a handleDragEnd function that I want to use to handle the dragged item, but I haven't implemented it yet.

The Center component contains the DragDropContext and the Droppable component which contains an unordered list. The items array is used to render each individual draggable component with the Draggable component.

Here's the code:

import React from "react";
import "./App.css";
import Item from "./Item";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import "react-beautiful-dnd/style.css";

const Center = () => {
  const items = ["image", "button", "TextView"];

  const handleDragEnd = (result) => {
    // TODO: Implement logic for handling the dragged item
  };

  return (
    <div className="Center">
      <DragDropContext onDragEnd={handleDragEnd}>
        <Droppable droppableId="droppable">
          {(provided) => (
            <ul
              className="items"
              {...provided.droppableProps}
              ref={provided.innerRef}
            >
              {items.map((item, index) => (
                <Draggable key={item} draggableId={item} index={index}>
                  {(provided) => (
                    <li
                      className="item"
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                    >
                      <Item item={item} />
                    </li>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </ul>
          )}
        </Droppable>
      </DragDropContext>
    </div>
  );
};

export default Center;
// item is a component that display the items 

Answer 1

i found the problem is very simple actually you only need to remove strict.mode from your index.js file in react