Skip to content

common-setup-issues.md

Latest commit

 

History

History
77 lines (49 loc) · 2.78 KB

common-setup-issues.md

File metadata and controls

77 lines (49 loc) · 2.78 KB

Common setup issues

This is a little guide to help you with some common setup issues

Check your console

For detectable setup issues we try to log information in the console for development builds of @hello-pangea/dnd. If things are not working, first thing to do is check your console.

React version

Please ensure that you meet our peer dependency version of React. Your React version needs to be greater than or equal to 18.0.0.

If you want to know what React version you are on take a look at your package.json or use console.log(React.version).

If you are not sure if your package.json version satisfies 18.0.0 have a read of npm: about semantic versioning and try out the npm sermver calculator

No duplicate ids

draggableId and droppableId values must be unique for the whole <DragDropContext /> and not just a list.

More information: identifiers guide

<Draggable /> indexes

Rules:

  • Must be unique within a <Droppable /> (no duplicates)
  • Must be consecutive. [0, 1, 2] and not [1, 2, 8]

Indexes do not need to start from 0 (this is often the case in virtual lists)

More information

No margin collapsing between <Draggable />s

This can happen if you have a margin-top as well as a margin-bottom on a <Draggable />.

More information

keys for a list of <Draggable />

If you are rendering a list of <Draggable />s then it is important that you add a key prop to each <Draggable />.

return items.map((item, index) => (
  <Draggable
    // adding a key is important!
    key={item.id}
    draggableId={item.id}
    index={index}
  >
    {(provided, snapshot) => (
      <div
        ref={provided.innerRef}
        {...provided.draggableProps}
        {...provided.dragHandleProps}
      >
        {item.content}
      </div>
    )}
  </Draggable>
));

More information

Avoid empty lists

We recommend you set a min-height or min-width on a <Droppable /> to ensure that there is a visible drop target when a list is empty

We go over this in our Get started with @hello-pangea/dnd course (This is using react-beautiful-dnd)

Image flickering in a <Draggable />

See our avoiding image flickering guide

← Back to documentation