Estoy trabajando en una aplicación de reacción. Tiene un botón Agregar para agregar línea para calcular el volumen. Cada línea contiene 2 campos de entrada para valores de espesor y área de superficie correspondiente. Noté que si se ingresó el grosor y el usuario comienza a ingresar el área de la superficie, el volumen se representará solo después del segundo símbolo.

Por ejemplo, espesor - ingresado 100, superficie - 1 y volumen 0 (pero esperado 0,1). Luego superficie - 10 y volumen 1 (como se esperaba). Lo mismo si entrada superficie 100 y espesor 1 --> volumen 0 (esperado 0,1).

¿Alguien podría explicar cómo solucionar el problema, por favor? Gracias por tu ayuda.

codigosandbox

 import { useState } from "react"; const App = () => { const [datas, setDatas] = useState([]); const handleChange = (index) => (event) => { let currentValue = +event.target.value; if (event.target.name === "thickness") { let newArr = [...datas]; newArr[index] = { ...newArr[index], thickness: currentValue }; if (datas[index].thickness && datas[index].surface) { newArr[index] = { ...newArr[index], volume: (currentValue * newArr[index].surface) / 1000, }; } setDatas(newArr); } if (event.target.name === "surface") { let newArr = [...datas]; newArr[index] = { ...newArr[index], surface: currentValue }; if (datas[index].thickness && datas[index].surface) { newArr[index] = { ...newArr[index], volume: (newArr[index].thickness * currentValue) / 1000, }; } setDatas(newArr); } }; const removeItem = (index) => { let newItems = datas.filter((product, id) => id !== index); setDatas(newItems); }; const addLine = () => { setDatas([ ...datas, { thickness: 0, surface: 0, volume: 0, }, ]); }; return ( <> {datas.map((data, index) => { return ( <li key={index}> <input label="thickness mm" name="thickness" id={index} value={data.thickness} onChange={handleChange(index)} /> <input name="surface" label="surface m¬2" id={index} value={data.surface} onChange={handleChange(index)} /> <span>Volume {data.volume}</span> <button onClick={() => removeItem(index)}>X</button> </li> ); })} <button onClick={addLine}>Add</button> </> ); }; export default App;