Buen dia, cuando doy click en agregar se va agregando un campo nuevo un input y si doy eliminar el campo nuevo se elimina.
Puedo tener muchos campos input y todo funciona, ahora necesito que al colocarle un numero dentro del input se vayan sumando los valores y me arroje en un campo aparte la suma total y lo mismo si quito un campo, que me vaya restando.
Lo he intentado pero no he logrado que estos campos que se agregan de forma dinámica sumen los valores que se les vaya colocando y que al eliminar algún campo pues vaya restando.
import React,{ useState} from 'react';
const defaultState = {
numero: "",
};
function Row({ onChange, onRemove, numero,}) {
return (
<div>
<input
type="number"
value={numero}
onChange={e => onChange("numero", e.target.value)}
/>
<button onClick={onRemove}>Eliminar</button>
</div>
);
}
export default function Pruebas() {
const [rows, setRows] = useState([defaultState]);
const handleOnChange = (index, name, value) => {
const copyRows = [...rows];
copyRows[index] = {
...copyRows[index],
[name]: value
};
setRows(copyRows);
};
const handleOnAdd = () => {
setRows(rows.concat(defaultState));
};
const handleOnRemove = index => {
const copyRows = [...rows];
copyRows.splice(index, 1);
setRows(copyRows);
};
return (
<div >
{rows.map((row, index) => (
<Row
{...row}
onChange={(name, value) => handleOnChange(index, name, value)}
onRemove={() => handleOnRemove(index)}
key={index}
/>
))}
<button onClick={handleOnAdd}>Agregar</button>
<input type="text" placeholder="suma total" />
</div>
);
}