He creado una tabla cuando un usuario carga un archivo csv. Este archivo se envía al backend para procesar y devolver los datos con un prefijo de: 'ERROR:' para detectar los errores en mi tabla.

Entonces, cuando una celda contiene la palabra 'ERROR:', esta celda se resaltará en rojo y contendrá una entrada para corregir este error.

Este es el elemento Cells que represento en la tabla de reacción y también mi estado:

 const initialHoverError = { rowIndex: 0, cellName: '', errorMessage: '' } const [hoverError, setHoverError] = useState(initialHoverError) const Cells = ({row}) => useMemo(() => { const { original } = row return row.cells.map(cell => { const { column } = cell const { id: cellIndex } = column const { rowIndex, cellName, errorMessage } = hoverError const hasError = checkError(original[cellIndex]) return ( <Table.Td {...cell.getCellProps()} className={cn(styles.Cell, { [styles.HasError]: hasError })} onMouseEnter={() => handleHoverError('active', row.id, cellIndex, original[cellIndex]) } onMouseLeave={() => handleHoverError()} > {hasError ? ( <div> <Text className={cn(styles.ErrorText, { [styles.ErrorVisible]: cellIndex === cellName && row.id + 1 === rowIndex + 1 })} > {errorMessage} </Text> <input className={styles.ErrorInput} onBlur={event => handleErrorUpdate(event, cellIndex, row.id)} /> </div> ) : ( cell.render('Cell') )} </Table.Td> ) }) }, [data])

Esta es la función que me permite desplazarme sobre las celdas que contienen un error y mostrárselo al usuario.

 const handleHoverError = (type, rowIndex, cellIndex, text) => { const hasError = checkError(text) if (type === 'active' && hasError) { setHoverError({ rowIndex, cellName: cellIndex, errorMessage: text.slice(6) }) return } return setHoverError(initialHoverError) }

Entonces, el problema que tengo es que cada vez que mi mouse deja el td (onMouseLeave), mi campo de entrada pierde el foco y se vuelve a renderizar (borrar). Entonces, cuando he escrito algo en una entrada y el mouse deja el elemento td, la entrada está en blanco y fuera de foco.

Y finalmente así es como actualizo mi campo de entrada. Cuando se elimina esta funcionalidad de desplazamiento, todo funciona perfectamente.

 const handleErrorUpdate = (event, cellIndex, rowIndex) => { event.preventDefault() const newData = [...data] if (event.target.value !== '') newData[rowIndex][cellIndex] = event.target.value setData(newData) }

Por favor, dame un consejo.