Intento hacer uso de react-beautiful-dnd en una aplicación de tipo de lista de tareas, pero cuando intento envolver el ul de mi componente de lista en el componente <DragDropContext/> , aparece el siguiente error
No overload matches this call. Overload 1 of 2, '(props: DragDropContextProps | Readonly<DragDropContextProps>): DragDropContext', gave the following error. Property 'onDragEnd' is missing in type '{ children: Element; }' but required in type 'Readonly<DragDropContextProps>'. Overload 2 of 2, '(props: DragDropContextProps, context: any): DragDropContext', gave the following error. Property 'onDragEnd' is missing in type '{ children: Element; }' but required in type 'Readonly<DragDropContextProps>'La consola indica además que este error se origina a partir de este bloque de código dentro de mi archivo indext.ts.d;
export interface DragDropContextProps { onBeforeCapture?(before: BeforeCapture): void; onBeforeDragStart?(initial: DragStart): void; onDragStart?(initial: DragStart, provided: ResponderProvided): void; onDragUpdate?(initial: DragUpdate, provided: ResponderProvided): void; onDragEnd(result: DropResult, provided: ResponderProvided): void; children: React.ReactNode | null; dragHandleUsageInstructions?: string | undefined; nonce?: string | undefined; enableDefaultSensors?: boolean | undefined; sensors?: Sensor[] | undefined; } export class DragDropContext extends React.Component<DragDropContextProps> { }¿Alguien podría ayudarme a entender este error y cómo podría solucionarlo?
A continuación se muestra el código que muestra el componente React al que estoy tratando de agregar DragDropContext.
export const TodoList: React.FC<TodoListProps> = ({ todos, toggleComplete, deleteTodo, updateTodo }) => { return ( <React.Fragment> <h2>Current List</h2> <DragDropContext> <ul className = 'list-group'> {todos.map((todo) => ( <TodoListItem key={todo.text} todo={todo} toggleComplete={toggleComplete} deleteTodo = {deleteTodo} updateTodo = {updateTodo} /> ))} </ul> </DragDropContext> </React.Fragment> ); };Typescript señala que DragDropContext requiere un accesorio onDragEnd . Si aún no está listo para implementar esa función, simplemente coloque una función vacía allí por ahora.
<DragDropContext onDragEnd={(result, provided) => { // TODO: implement onDragEnd }}>