1

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 enter image the before reordering and after the reordering I have after the reordering

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>

0 Answers0