Por alguna razón, este código funciona:

 const Task = ({task, onDelete, onToggle}) => { return ( <div className="task" onClick={() => onToggle(task.id)}> </div>

Pero este no:

 const Task = ({task, onDelete, onToggle}) => { return ( <div className="task" onDoubleClick={() => onToggle(task.id)}> </div>

El resto del código es este, si te sirve:

Aplicación.js

 const toggleReminder = (id) => { console.log("double click!", id); } return ( <div className="container"> <Header title="Task Tracker"/> {tasks.length > 0 ? ( <Tasks tasks={tasks} onDelete={deleteTask} onToggle={toggleReminder}/> ) : ("No Tasks to show") }

Tareas.js

 const Tasks = ({ tasks, onDelete, onToggle }) => { return ( <> {tasks.map((task, index) => ( <Task key={index} task={task} onDelete={onDelete} onToggle={onToggle} /> ))} </> ) }

y Task.js

 const Task = ({task, onDelete, onToggle}) => { return ( <div className="task" onDoubleClick={() => onToggle(task.id)}> <h3>{task.text} <FaTimes style={{color:"red", cursor: 'pointer'}} onClick={()=> onDelete(task.id)}/> </h3> <p>{task.day}</p> </div> ) }

He estado copiando todo de un tutorial, y realmente no entiendo el problema. Con onClick funciona bien. ¿Funcionan de manera diferente? Vi una pregunta similar pero no entendí la respuesta ¡Gracias!