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>
    );
  }

Answer 1

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.

Answer 2

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

Answer 3

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

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

</Droppable>

Answer 4

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

Answer 5

I had the same issue. I was trying to drag an element from one place and drop it into another place. I also had nested droppable areas so that different components could be placed in their specific place.

My fix was to make the source <Dropabble> type prop the same as the destination <Dropabble>.

For example, only the draggables inside the <Droppable type="A" droppabbleId="droppable-1"> can be dropped in the <Droppable type="A" droppabbleId="droppable-2">; and not in <Droppable type="B" droppabbleId="droppable-3">