CODEWITHSUNDEEP
javascriptreactjstypescriptreact-beautiful-dnd
Vidya Patil
Vidya Patil

Reputation: 21

Unable to find draggable with id: b7zc6

Hi i am new to react and stuck with react-beautiful-dnd issue. I Seem to have configured as per the documentation but still facing this weird issue related to draggable id.

  1. made draggableid as string
  2. provided index as number
  3. assigned innerref properly

But still the issue persist. Need some expert help in this area.

CodeSandBox Link : Link to react beautiful dnd codesandbox issue code

Also adding the code for quick glance:

import "./styles.css";
import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
import { useState } from "react";

export default function App() {
  const [list, setList] = useState(generateData());

  const st = {
    width: "300px",
    cursor: "grab",
    display: "flex",
    gap: "10px",
    flexDirection: "column"
  };
  const onDragEnd = (result) => {
    if (result.destination) {
      alert("drag successfull");
    }
  };

  return (
    <div className="App">
      <h4>Test</h4>
      <div>
        <DragDropContext onDragEnd={onDragEnd}>
          <Droppable droppableId="droppable">
            {(provided) => (
              <div
                {...provided.droppableProps}
                ref={provided.innerRef}
                style={st}
                className="work-parent"
              >
                <WorkList list={list} />
              </div>
            )}
          </Droppable>
        </DragDropContext>
      </div>
    </div>
  );
}

function WorkList({ list }) {
  return list.map((l, index) => <Work key={l.id} work={l} index={index} />);
}

function Work({ work, index }) {
  const st = {
    padding: "10px",
    width: "100%",
    color: "white",
    backgroundColor: "purple",
    width: "200px",
    height: "50px"
  };
  return (
    <Draggable draggableId={work.id} key={work.id} index={index}>
      {(provided) => (
        <div
          ref={provided.innerRef}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
          style={st}
        >
          {work.title}
        </div>
      )}
    </Draggable>
  );
}

function generateData() {
  const data = [];

  for (let i = 0; i < 10; i++) {
    data.push({
      title: "Work - " + i,
      id: makeid(5)
    });
  }

  return data;
}

function makeid(length) {
  var result = "";
  var characters =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  var charactersLength = characters.length;
  for (var i = 0; i < length; i++) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
  }
  return result;
}

Upvotes: 2

Views: 2748

Answers (1)

Yana Trifonova
Yana Trifonova

Reputation: 641

For the first look your code is correct. The problem that you faced is about upgrading a React v18. As a temporary solution I can advise you to remove <StrictMode> wrapper and your app will work.

You can find more information about this issue here: https://github.com/atlassian/react-beautiful-dnd/issues/2350

UPDATE:

Downgrade to React v17 also might help: https://github.com/atlassian/react-beautiful-dnd/issues/2407

UPDATE 2:

I have not tested it by myself but seems that this could be a workaround to use React v18 and do not remove <StrictMode>:https://github.com/atlassian/react-beautiful-dnd/issues/2399#issuecomment-1167427762

Upvotes: 6

Related Questions