revisa este código por favor https://stackblitz.com/edit/react-koqfzp?file=src/Section.js
Cada vez que agrego un elemento, también agrego un número aleatorio que quiero editar. El número se representa en un componente de campo de texto MUI.
<TextField type="number" variant="standard" aria-readonly={edit === true ? false : true} value={edit === true ? value : numbers[i]} onChange={(e) => setValue(e.target.value)} />Y los botones se representan en función del estado de edición, así:
{edit === true ? ( <button onClick={() => saveEdit(i)}>Save</button> ) : ( <button onClick={() => setEdit(true)}>Edit</button> )}Y está funcionando, puedo editarlo y volverlo a representar con el nuevo valor, el problema es que cuando hago clic en el botón Editar, cada campo recibe el nuevo valor de entrada y el botón Guardar aparece en cada campo, aunque cuando lo guardo, vuelve a su valor original. ¿Cómo puedo hacer lo que estoy haciendo pero solo en un campo específico?
El problema es que está utilizando setEdit como booleano
Puede definirlo como el índice de la matriz para editar con -1 como valor inicial
const [edit, setEdit] = useState(-1) ... {edit === i ? ( <button onClick={() => saveEdit(i)}>Save</button> ) : ( <button onClick={() => setEdit(i)}>Edit</button> )}Recomiendo crear otro componente. Ejemplo: el elemento tiene su propia edición de estados, estados de valor y le pasa los accesorios necesarios, que son el valor, los números, guardarEditar (índice, nuevo valor), eliminar elemento (índice) y también el índice
saveEdit debe cambiarse en la sección pasando el índice y el valor nuevo
espero que esto te quede claro
agregue los valores del mapa en un componente y agregue los estados dentro del componente para que tenga múltiples estados para cada componente, no solo 1
componente principal
{section.items.map((item, i) => ( <Component key={i} item={item}/> )}componente hijo
const Component = ({ section, addItem, removeItem}) => { const [newItem, setNewItem] = useState(''); const [edit, setEdit] = useState(false); const [value, setValue] = useState(0); const [numbers, setNumbers] = useState(section.number); const handleChange = (e) => { setNewItem(e.target.value); }; return ( <TextField type="number" variant="standard" aria-readonly={edit === true ? false : true} value={edit === true ? value : numbers[i]} onChange={(e) => setValue(e.target.value)} /> )