Unable to find draggable with id: (some string id) React 18

[Patil-Mayur]

I have seem to have configured it correctly but still i am facing the issue. i first wrapped my listing component inside useMemo . Later removed it and just checked if drag could be done or not. Still the issue persist and i can't seem to figure it out.

code sandbox link

[YanaTrifonova]

Current version of react-dnd does not support <React.StrictMode /> for "react":^18. You might find a temporary solution at this issue (remove StrictMode): https://github.com/atlassian/react-beautiful-dnd/issues/2350

[ryrocks]

I encounter this same issue in my project by Next.js. After I considered @YanaTrifonova 's suggestion, I did some tests as below.

In Next.js, if your code is running on prod mode, there is no issue. This issue only happens in dev mode. If you persist in turning off strict mode, you can go to next.config.js

module.exports = {
  reactStrictMode: true,  // turn to false
}

[TiagoDiass]

I was facing the same problem here, the dnd was working in prod mode (after build and start), but not in development, I've just downgraded the version of react and react-dom to 17.0.0, and it's now working

[Patil-Mayur]

Actually i removed RestrictMode.

Now the behaviour is weird. Sometimes it works, sometimes it does not.

i still get this issue sometimes in console Unable to find draggable with id.

I guess i need to downgrade react to 17

[teomihov]

Hello,

I still receiving those errors:

console.warn
  react-beautiful-dnd

  Unable to find any drag handles in the context "0"

  👷‍ This is a development only message. It will be removed in production builds.

console.error
  react-beautiful-dnd

  A setup problem was encountered.

  > Invariant failed: Draggable[id: item-0]: Unable to find drag handle

  👷‍ This is a development only message. It will be removed in production builds.

There is my component:

class OrchestratorExecutionPlannerSimpleView extends Component {
  constructor(props) {
    super(props);
    const plannerCommands = toJS(props.plannerCommands);
    this.state = {
      plannerCommands,
      isReady: false,
    };
  }

  componentDidMount() {
    this.setState(prevState => ({
      ...prevState,
      isReady: true
    }));
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ plannerCommands: toJS(nextProps.plannerCommands), readyToPrint: true });
  }

  render() {
    const { plannerCommands, isReady: readyToPrint } = this.state;
    const { disabled } = this.props;

    const commandsCss = classnames({
      'disabled-actions': disabled,
      'execution-plan-steps': true
    });

    if (!readyToPrint) {
      return null;
    }

    return (
       <DragDropContext onDragEnd={this.onDragEnd}>
         <Droppable droppableId="droppable">
          {(droppableProvided, droppableSnapshot) => (
            <div
              data-nightwatch="execution-plan-steps"
              data-view="simple"
              className={commandsCss}
              {...droppableProvided.droppableProps}
              ref={droppableProvided.innerRef}
            >
              {
                plannerCommands.map((step, stepIndex) => {
                  const id = `item-${stepIndex}`;
                  const item = {
                    renderActionStatus: true,
                    renderRemoveButton: !disabled,
                    index: stepIndex,
                    removeButtonClickHandler: (evt, idx) => this.removeCommandAtIndex(evt, idx),
                    actionStatus: step.status,
                    actionGroup: step.name,
                    actionGroupItems: step.nodeNames,
                    actionStatusTitle: step.warningText,
                    nightwatchSelector: 'execution-plan-item'
                  };
                  return (
                    <Draggable key={id} draggableId={id} index={stepIndex}>
                      {(draggableProvided, draggableSnapshot) => (
                        <div
                          ref={draggableProvided.innerRef}
                          {...draggableProvided.draggableProps}
                          {...draggableProvided.dragHandleProps}
                          style={this.getDragItemStyle(
                            draggableSnapshot.isDragging,
                            draggableSnapshot.draggingOver,
                            draggableProvided.draggableProps.style
                          )}
                        >
                          <p key={id}>{id}</p>
                        </div>
                      )}
                    </Draggable>
                  );
                })
              }
              {droppableProvided.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>);
  }
.... // omit the code for brevity

Could you please advise how to fix the errors?

[Grawl]

there is a comment with link to article with code snippet that makes it work

[mackbdev]

Can confirm that disabling strict mode allows for drag & drop to work using react-beautiful-dnd or react-grid-dnd

[navinrangar]

Using ID that is the same for draggableID prop instead of index for key prop solved my problem. This really works!

[gabriel-rr]

Turning off React Strict mode didn't work on my end. I realized that if I change the id of the droppable element after first render it works. It doesn't feel like the best solution but maybe it can work for someone else:

const [droppableId, setDroppableId] = useState('list1');
useEffect(() => {
    setDroppableId(() => 'list');
  }, []);
<DragDropContext onDragEnd={onDragEnd}>
        <Droppable droppableId={droppableId}>
...

[suzan-rana]

Using ID that is the same for draggableID prop instead of index for key prop solved my problem. This really works!

This actually works guys. I am using Next13, turned off reactStrictMode but same error was occuring, but this method worked for meeeee.😊

[agile-apoorvdodiya]

So, what is the final solution?

I tried removing strict mode and it worked but I need to keep strict mode

[imshadowz]

Using ID that is the same for draggableID prop instead of index for key prop solved my problem. This really works!

This solution work for me. Thx.

[appesco]

hi guys,

package.json: "next": "13.1.6" "react": "18.2.0"

works only if

next.config.js: { reactStrictMode: false }

and

<Draggable key={someIdThatIsNotString} draggableId={someIdThatIsNotString} index={indexNumberInArray}> {someContent} </Draggable>

any way to fix this?

thanks :)

[Ulisesx21]

Instead of importing the "Dropable" form from "react-beautiful-dnd", you can use this custom component as a replacement:

// StrictModeDroppable.tsx

import { useEffect, useState } from "react"; import { Droppable, DroppableProps } from "react-beautiful-dnd"; export const StrictModeDroppable = ({ children, ...props }: DroppableProps) => { const [enabled, setEnabled] = useState(false); useEffect(() => { const animation = requestAnimationFrame(() => setEnabled(true)); return () => { cancelAnimationFrame(animation); setEnabled(false); }; }, []); if (!enabled) { return null; } return <Droppable {...props}>{children}\<\/Droppable> };

Credit for the TypeScript version goes to GiovanniACamacho and Meligy on GitHub.

This worked for me, only delete DroppableProps if you dont use Typescript.

[db-qc]

Thanks @Ulisesx21, that worked for me :)

[elbotho]

https://github.com/hello-pangea/dnd (maintained fork) worked as a drop-in replacement for me 👌

[eugen-bondarev]

https://github.com/atlassian/react-beautiful-dnd/issues/2407#issuecomment-1648339464

The only comment that helped me (next.js v14.0.4). Thank you so much!

[singleseeker]

<Droppable
                droppableId="product-images"
                direction='horizontal'
                renderPlaceholder={(provided) => (
                  <div className="col-xxl-2 col-md-3 col-4 " />
                )}
              >
                {(provided) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.droppableProps}
                    className="mb-4 row row-gap-4"
                  >
                    {values?.medias?.map((item, index) => {
                      return <Item item={item} key={item.id} order={index} />;
                    })}
                    {provided.placeholder}
                    <ItemUpload />
                  </div>
                )}
              </Droppable>

just as @navinrangar said, change key values to item.id , do not use index. it fixed my problem. thank you.

[codepandy]

Just replace react-beautiful-dnd with @hello-pangea/dnd and you should be good to go

[d-pfeif]

Using ID that is the same for draggableID prop instead of index for key prop solved my problem. This really works!

This worked for me! I had to add key to Draggable and it had to be the same value as my draggableId

Example solution:

<Draggable
  key={`board-${board?.id}`}
  draggableId={`board-${board?.id}`}
  index={index}
>
  ...
</Draggable>

[FunctionEurus]

<Draggable
      draggableId={`${list.id}-${task.id.toString()}`}
      key={`${list.id}-${task.id.toString()}`}
      index={index}
    >
      ...
</Draggable>

I read this issue and tried to use the same string as draggableid and key, but it didn't work. So I have to close strict mode to make it work.