Estoy tratando de calcular la suma de los valores ingresados (la cantidad de entradas cambia dinámicamente)
Esta es la función que devuelve el número de entradas:
const renderINP = () => { let td = []; for (let i = 1; i <= 3; i++) { td.push(<td key={i}><input className="example" type="text" defaultValue="0" id={i} /></td>); } return td; };Esta es mi devolución de componentes
return ( <div> <table> <tbody> <tr> {renderINP()} <td>total<input id="total" type="text" defaultValue={total} /></td> </tr> </tbody> </table> </div> ); }Y esta es la función que se supone que devuelve la suma de los valores ingresados por el usuario:
const [total,setTotal] = useState(0); const getSum = () => { let totalOfInps=0; for (let i = 1; i <= 3; i++){ let a=parseFloat(document.getElementById(i).value); totalOfInps+=a; } setTotal(totalOfInps); }Estoy tratando de devolver la suma de todos los valores ingresados en las entradas que tenían id = "total" pero no devuelve nada, también cuando estoy usando console.log (totalOfInps) No muestra nada en la consola, cómo puedo obtener la suma de todos los valores de entrada?
import {useState} from 'react'; const sumAll = numList => numList.reduce((acc, num = 0) => acc + num, 0); const handleInputChange = (inputIndex, setValues) => event => { const value = parseFloat(event.target.value); if(!isNaN(value)){ setValues(previous => { const copy = previous.slice(); copy[inputIndex] = value; return copy; }); } } function App(){ const [values, setValues] = useState([]); const total = sumAll(values); return ( <div> <table> <tbody> <tr> { [1,2,3].map((id, index) => { const onChange = handleInputChange(index, setValues); return ( <td key={index}> <input className="example" onChange={onChange} type="text" defaultValue="0" id={id} /> </td> ); }) } <td>total<input id="total" type="text" defaultValue="0" value={total}/></td> </tr> </tbody> </table> </div> ); }; export default App;