React-beautiful-dnd returning destination=null

Question

I am using the react-beautiful-dnd but whenever I am moving the item it's returning back. I think its returning back because I am receiving destination: null

I do not know why this is happing. Why I'm getting destination always null.

<DragDropContext onDragEnd={this.onDragEnd} onDragUpdate={this.onDragUpdate}>
                    <Droppable droppableId="droppable">
                      {(provided, snapshot) => (
                        <div {...provided.droppableProps} ref={provided.innerRef}>
                          {this.props.editor.pages.length > 0
                            ? this.props.editor.pages.map((page, index) => (
                                <PageDetail
                                  key={page.uuid}
                                  page={page}
                                  togglePageModal={this.props.actions.togglePageModal}
                                  currentPageId={this.props.currentPageId}
                                  toggleCreatePage={this.props.actions.toggleCreatePage}
                                  index={index}
                                />
                                // <FolderDetail key={page._id} folder={page} />
                              ))
                            : ''}
                          {provided.placeholder}
                        </div>
                      )}
                    </Droppable>
                  </DragDropContext>

In PageDetail component

    const { name, uuid, projectId } = this.props.page;
    const { page, index } = this.props;
    return (
      <Fragment>
        <Draggable key={page.index} draggableId={page.index} index={index}>
          {(provided, snapshot) => (
            <div>
              <div
                ref={provided.innerRef}
                {...provided.draggableProps}
                {...provided.dragHandleProps}
              >
                 {name}
              </div>
              {provided.placeholder}
            </div>
          )}
        </Draggable>
      </Fragment>
    );
  }

score 7 · Answer 1 · answered Dec 08 '20 at 15:16

7

Ensure your Droppable has an absolutely unique droppableId. I encountered this issue when using multiple Droppable areas, but some accidentally shared droppableIds. WHen making them unique, then my placeholder was rendered when dragging over, my destination argument was then also populated as expected.

answered Dec 08 '20 at 15:16

Boyardee

304
1
6

I was mapping multiple droppable areas with only one id. I used a dynamic id from the map function and it works – Ibra Dec 19 '21 at 23:04

Fatih Bayhan · Answer 2 · 2023-05-08T05:23:48.773

1

If you working on multiple column drag drop, all dropple area must be in the same <DragDropContext> tags.

edited May 08 '23 at 05:23

answered May 07 '23 at 19:12

Fatih Bayhan

141
1
3

1

makes complete sense, and was the issue I had. Silly of me in hindsight. – Christo Aug 10 '23 at 17:54

score 0 · Answer 3 · edited Jan 30 '21 at 11:04

0

I was having a similar problem (but only in Chrome). My components were wrapped in spans and the destination kept coming up null.

Try wrapping PageDetail in a div and change Fragment to div

edited Jan 30 '21 at 11:04

Cody Gray - on strike

239,200
50
490
574

answered Jan 22 '21 at 08:27

G Dun

1

score 0 · Answer 4 · answered Apr 28 '23 at 12:26

0

Faced this issue and solved it by passing isDropDisabled={false} to the Droppable component:

<Droppable
    droppableId={DROP_IDS.droppable}
    isDropDisabled={false}
>
 ....
 ....

</Droppable>

answered Apr 28 '23 at 12:26

Kirubel

1,461
1
14
33

React-beautiful-dnd returning destination=null

4 Answers4