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 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">