I'm trying to reorder the list of questions.
the problem I'm facing is that after the drag and drop the page is not what I was expecting some fields are not changed after the re-render. before the reordering, I have
and after the reordering I have
by inspecting I have the list is correctly modify but in the page, some inputs are like fixed
this is the code
setQuestions(old => {
//find our dropped questions
const movedItem = old.find(( _, index) => index === source.index);
// // use filter to remove item from it's position
const remainingItems = old.filter(( _, index) => index !== source.index);
old = [
...remainingItems.slice(0, destination.index),
movedItem,
...remainingItems.slice(destination.index)
]
//return the array qyestion update
return [...old]
})
}
return (
/**
* DragDropContext is a container where we define the principal area of our DnD question
* Droppable define a column where are draggable element
* draggable define component we want to apply DnD to
*/
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="droppable">
{(provided, snapshot) => (
<div
{...provided.droppableProps}
ref={provided.innerRef}
style={getListStyle(snapshot.isDraggingOver)}
>
{questions.map((question, index) => (
<Draggable key={index} draggableId={String(index) } index={index}>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={getItemStyle(
snapshot.isDragging,
provided.draggableProps.style
)}
>
<Question key={index} index={index} question={question}
questions={questions} setQuestions={setQuestions} />
</div>
)}
</Draggable>
))}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>