Estoy usando react-beautiful-dnd para permitir que el usuario elija las opciones usando arrastrar y soltar.
Sin embargo, el componente no parece volver a renderizarse cuando se cambia el orden de las opciones. (He intentado iniciar sesión en la consola y parece haber cambiado).
Este es el método onDragEnd :
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]); };Todo el código se puede encontrar en este codesandbox .
Está representando cursos optionalCourses en el DND pero está actualizando el estado de la lista. Debería representar la list en su lugar.
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> );