React Beautiful DND Invariant 在可拖动和可放置的 id 上失败

Question

Trying to figure out why I can't drag and drop my items (I get a hand over the list elements, but no ability to pick them up). I followed a tutorial to a T and i'm not sure why it's failing. I'm not concerned with list order or out of bounds dragging right now, just being able to drag at all.

I get the following errors:

A setup problem was encountered. > Invariant failed: Draggable requires a draggableId

A setup problem was encountered.> Invariant failed: A Droppable requires a droppableId prop

However, I believe I have all the necessary IDs on my elements. Here is my code (pls enjoy the sheRa references)

import React from "react";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";

const sheRaCharacters = [
  {
    id: "Adora",
    name: "Adora",
    color: "#FFD700",
  },
  {
    id: "Catra",
    name: "Catra",
    color: "#ff0000",
  },
  {
    id: "Entrapta",
    name: "Entrapta",
    color: "purple",
  },
  {
    id: "Mermista",
    name: "Mermista",
    color: "#0000ff",
  },
];

class DragDropTest extends React.Component {

  render() {
    const listStyle = {
      backgroundColor: "pink",
      padding: "10px",
      margin: "8px",
      borderRadius: "8px",
    };

    const characterList = sheRaCharacters.map(({ id, name, color }, index) => {
      return (
        <Draggable key={id} draggableID={id} index={index}>
          {(provided) => (
            <li
              ref={provided.innerRef}
              {...provided.draggableProps}
              {...provided.dragHandleProps}
              style={listStyle}
            >
              <p style={{ color: color }}>{name}</p>
            </li>
          )}
        </Draggable>
      );
    });

    return (
      <div>
        <DragDropContext>
          <Droppable droppableID="characters">
            {(provided) => (
              <ul ref={provided.innerRef} {...provided.droppableProps}>
                {characterList}
                {provided.placeholder}
              </ul>
            )}
          </Droppable>
        </DragDropContext>
      </div>
    );
  }
}

export default DragDropTest;

So the droppable area has a string ID and all the draggable elements also have string IDs. What did I miss?

Answer 1

JS is case sensitive so you must write 'draggableId' instead 'draggableID'