Prueba esto:

 import "./styles.css"; import React, { useState } from "react"; export default function App() { // Changes made here const [item, setItem] = useState({}); const [counter, setCounter] = useState(0); console.log("item 1:", item[0], "item 2:", item[1],item); const handleCounter = () => { setCounter(counter + 1); }; const addItem = (newItem) => setItem((ing) => [...ing, newItem]); return ( <> {Array.from(Array(counter)).map((c, index) => ( <input type="text" key={index} //Changes made here value={item[index]} label="Item" // Changes made here onChange={(event) => setItem({...item, [index]:event.target.value })} /> ))} <button onClick={handleCounter}>Add one more item</button> </> ); }

En lugar de usar una matriz para almacenar los valores de entrada, recomiendo usar un objeto, ya que es más sencillo.

Si quisiera usar una matriz, puede reemplazar el evento onChange con lo siguiente:

 onChange={(event) => { const clonedArray = item.slice() clonedArray[index] = event.target.value setItem(clonedArray) }}

Es un poco más complicado y probablemente un poco menos óptimo, por lo que recomiendo usar un objeto.

Si desea recorrer el objeto más tarde, puede usar Object.entries() así:

 [...Object.entries(item)].map(([key, value]) => {console.log(key, value)})

Aquí está la documentación para Object.entries() .

1. En primer lugar, está utilizando un enlace de datos bidireccional con su componente TextField , por lo que también debe pasar una propiedad de value .
2. En segundo lugar, para obtener el valor actual de TextField , no usamos this.value . Más bien, la devolución de llamada a onChange toma un argumento de tipo Event y puede acceder al valor actual de la siguiente manera

 <TextField ... onChange={(e) => { const value = e.target.value; // Do something with value }} />

3. No puede devolver varios elementos secundarios de un componente sin envolverlos en un solo componente. Simplemente está devolviendo varios componentes de TextField al mismo nivel, lo que también está causando un error. Intente envolverlos en React.Fragment de la siguiente manera

 ... return ( <React.Fragment> {/* Here you can return multiple sibling components*/} </React.Fragment> );

4. Está mapeando los componentes de TextField usando counter que es igual a la longitud de la matriz de item . En handleCounter , agregaremos una cadena de marcador de posición para acomodar el nuevo valor de TextField .

 ... const handleCounter = () => { setCounter(prev => prev+1); // Increment the counter setItem(prev => [...prev, ""]); // Add a new value placeholder for the newly added TextField } return ( <React.Fragment> { /* Render only when the value of counter and length of item array are the same */ counter === item.length && (Array.from(Array(counter).keys()).map((idx) => ( <TextField key={idx} value={item[idx]} label="Item" onChange={(e) => { const val = e.target.value; setItem(prev => { const nprev = [...prev] nprev[idx] = val; return nprev; }) }} /> )))} <br /> <Button onClick={handleCounter}>Add one more item</Button> </React.Fragment> );

5. Aquí está el enlace de la caja de arena

solución de código : https://codesandbox.io/s/snowy-cache-dlnku?file=/src/App.js

 import "./styles.css"; import React, { useState } from "react"; export default function App() { const [item, setItem] = useState(["a", "b"]); const handleCounter = () => { console.log(item, "item"); setItem([...item, ""]); }; const setInput = (index) => (evt) => { item.splice(index, 1, evt.target.value); setItem([...item]); }; return ( <> {item.map((c, index) => { return ( <input type="text" key={index} label="Item" value={c} onChange={setInput(index)} /> ); })} <button onClick={handleCounter}>Add one more item</button> </> ); }

te lo he solucionado. mira si esto te funciona, si hay algún problema dime