Tengo un modal con una lista de respuestas. Puedo hacer clic en una respuesta para seleccionarla y luego hacer clic en un botón para confirmar mi elección. O puedo hacer doble clic en una respuesta para seleccionarla y confirmar.

Tengo problemas para manejar correctamente el caso de doble clic.

Con los componentes de la clase React, habría usado la devolución de llamada de setState() de esta manera:

 setState({selectedAnswer: answer}, confirm)

Pero en este momento, solo descubrí lo siguiente:

 const MyModal = ({hide, setAnwser}) => { const [selectedAnswer, setSelectedAnswer] = useState(null); const [isSelectionDone, setIsSelectionDone] = useState(false); const confirm = () => { if (!selectedAnswer) { return; } setAnwser(selectedAnswer); hide(); }; const handleAnswerOnClick = (answer) => { setSelectedAnswer(answer); }; const handleAnswerOnDoubleClick = (answer) => { setSelectedAnswer(answer); setIsSelectionDone(true); }; useEffect(confirm, [isSelectionDone]); return ( <div> <div>{answers.map((answer) => <MyAnswer isSelected={answer.id === selectedAnswer?.id} key={answer.id} answer={answer} onClick={handleAnswerOnClick} onDoubleClick={handleAnswerOnDoubleClick}/>)}</div> <button onClick={confirm}>Confirm</button> </div> ); }

Sospecho firmemente que hay una forma más agradable/mejor de hacerlo.

Tal vez un simple:

 const MyModal = ({hide, setAnwser}) => { const [selectedAnswer, setSelectedAnswer] = useState(null); const confirm = () => { if (!selectedAnswer) { return; } setAnwser(selectedAnswer); hide(); }; const handleAnswerOnClick = (answer) => { setSelectedAnswer(answer); }; const handleAnswerOnDoubleClick = (answer) => { setAnwser(answer); hide(); }; return ( <div> <div>{answers.map((answer) => <MyAnswer isSelected={answer.id === selectedAnswer?.id} key={answer.id} answer={answer} onClick={handleAnswerOnClick} onDoubleClick={handleAnswerOnDoubleClick}/>)}</div> <button onClick={confirm}>Confirm</button> </div> ); }

¿Qué camino es mejor?