I'm using react-beautiful-dnd to let the user choose the options using drag and drop.
However, the component doesn't seem to re-render when the order of the options is changed. (I've tried console logging it, and it appears to have changed.)
This is the onDragEnd method:
const onDragEnd = (result) => {
if (!result.destination) return;
const { source, destination } = result;
if (!destination) {
return;
}
if (source.index === destination.index) {
return;
}
let items = [...list];
const [removed] = items.splice(source.index, 1);
items.splice(destination.index, 0, removed);
setList([...items]);
};
All the code can be found in this codesandbox.
You are rendering optionalCourses in the DND but you are updating the list state.
You should render the list instead.
return (
<div className={componentClassName}>
<span className={`${componentClassName}__title`}>{groupTitle}</span>
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId={groupId}>
{(provided, snapshot) => (
<div
{...provided.droppableProps}
ref={provided.innerRef}
className={`${componentClassName}__list`}
>
> {list.map((optionalCourse, index) => {
> return <OptionalCourseCard key={index} {...optionalCourse} />;
})}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
</div>
);