I'm trying to make a web app using Next JS 12.3.1 with draggable components using react-beautiful-dnd version 13.1.1. For now, I'm just trying to get a single vertical list of draggable components to work
import React, { useState } from "react";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
export default function BigOlList() {
const defaultList = ["A", "B", "C", "D", "E"];
// React state to track order of items
const [itemList, setItemList] = useState(defaultList);
// Function to update list on drop
const handleDrop = (droppedItem) => {
// Ignore drop outside droppable container
if (!droppedItem.destination) return;
var updatedList = [...itemList];
// Remove dragged item
const [reorderedItem] = updatedList.splice(droppedItem.source.index, 1);
// Add dropped item
updatedList.splice(droppedItem.destination.index, 0, reorderedItem);
// Update State
setItemList(updatedList);
};
return (
<div className="App">
<DragDropContext onDragEnd={handleDrop}>
<Droppable droppableId="list-container">
{(provided) => (
<div className="list-container" {...provided.droppableProps} ref={provided.innerRef}>
{itemList.map((item, index) => (
<Draggable key={item} draggableId={item} index={index}>
{(provided) => (
<div className="item-container"
{...provided.dragHandleProps}
{...provided.draggableProps}
ref={provided.innerRef}
>
{item}
</div>
)}
</Draggable>
))}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
</div>
);
}
I tried following an example but none of my items are draggable. The grabbable cursor doesn't even show up when I hover over the boxes. It's just a normal pointer. I heard that resetServerContext needed to be called in _document.js, so I did that, but it didn't make a difference. The app still compiles with no issues, errors, or other indicators that anything is broken. Anyone have more experience with this library, or know of another more supported library?
