Estoy tratando de imprimir dentro de estas devoluciones de llamada de eventos, como puede ver en el código, incluso si no se imprimen. Intenté resolver esto con onDragEnd pero la identificación obtenida de currentTarget en onDragEnd es la misma que onDragStart. Entonces necesito onDrop para esto que no se activa. ¿Alguien puede decir dónde me estoy equivocando? Aquí está el código:

 import React, { useState } from 'react' import { MoreVert } from '@material-ui/icons'; function newFunc(){ const [dragId, setDragId] = useState('') const [pendingTask, setPendingTask] = useState([{order: 1, id: 'task1'}, {order: 2, id: 'task2'}, {order: 3, id: 'task3'}]) const handleDrag = (evt) => { console.log(evt.currentTarget.id) setDragId(evt.currentTarget.id) } const handleDragOver = (event) => { console.log(event.currentTarget) event.preventDefault() } const handleDrop = (evt) => { alert('dropped') console.log(evt) const dragBox = pendingTask.find((task) => task.id === dragId); const dropBox = pendingTask.find((task) => task.id === evt.currentTarget.id); const dragBoxOrder = dragBox.order; const dropBoxOrder = dropBox.order; const newPendingTaskState = pendingTask.map((task) => { if (task.id === dragId) { task.order = dropBoxOrder; } if (task.id === evt.currentTarget.id) { task.order = dragBoxOrder; } return task; }); setPendingTask(newPendingTaskState); } const handlePendingTaskClick = () => { // doing something } return( <div> {pendingTask.length ? pendingTask.map((elem, ind)=>{ return( <div style={{cursor: 'pointer'}} key={ind} onClick={() => handlePendingTaskClick(elem)} > <div draggable={true} onDragOver={handleDragOver} onDragStart={handleDrag} onDrop={handleDrop} id={elem.id} > <MoreVert /> </div> <div> {elem.workflow} </div> </div> ) }):null } </div> ) } export default newFunc

Estoy usando ganchos de reacción y una API de arrastrar y soltar HTML incorporada. . Edición 1: solo no funciona en el navegador Chrome más reciente, versión: 97.0.4692.71.