Tengo campos creados dinámicos (etiqueta de entrada)
const [data, setData] = useState({ native: [{}], rolls: [{}] }) // initial data {navtive?.map((item, index) => { return ( <input type="text" name={item.id} onChange={(e) => handleChange("fee", e.target.value, index, item.id) } /> ... {rolls?.map((item, index) => { return ( <input type="text" name={item.id} onChange={(e) => handleChange("fee", e.target.value, index, item.id) } />Rendimiento esperado:
const output = { native: [{id: 1, fee: "12"}, {id: 5, fee: "2"}], rolls: [{id: 4, fee: "1332"}], };Función onChange:
const handleChange = (field, value, index) => { setData((prevState) => { const nextState = [...prevState]; nextState[index][field] = value; return nextState; }); };¿Cómo obtener el resultado esperado? ¿Qué estoy haciendo mal en la función onChange?
Gracias
Debe agregar más argumentos a handleChange para esta salida. type - para entender qué propiedad es native o rolls . id - id del elemento de datos actual. Ejemplo - caja de arena
const handleChange = (type, field, value, index, id) => { setData((prevState) => { const nextState = [...prevState[type]]; nextState[index] = { ...prevState[type][index], id, [field]: value }; return { ...prevState, [type]: nextState }; }); };JSX
handleChange("native", "free", e.target.value, index, item.id)