check this code please https://stackblitz.com/edit/react-koqfzp?file=src/Section.js

Everytime i add an item, i'm also adding an random number that i want to edit. The number is rendered at a MUI Text field component.

<TextField
            type="number"
            variant="standard"
            aria-readonly={edit === true ? false : true}
            value={edit === true ? value : numbers[i]}
            onChange={(e) => setValue(e.target.value)}
          />

And the buttons are rendered based on edit's state, like this:

{edit === true ? (
            <button onClick={() => saveEdit(i)}>Save</button>
          ) : (
            <button onClick={() => setEdit(true)}>Edit</button>
          )}

And it's working, i can edit it and rerender with the new value, the problem is that when i click the edit button, every field receives the new input value and the save button shows up in every field, though when i save it, it returns to it's original value. How i can do what i'm doing but to just one specific field?

CodePudding user response：

The problem is that you are using setEdit as a boolean

You can define it as the index of the array to edit with -1 as starting value

const [edit, setEdit] = useState(-1)
...

{edit === i ? (
            <button onClick={() => saveEdit(i)}>Save</button>
          ) : (
            <button onClick={() => setEdit(i)}>Edit</button>
          )}

CodePudding user response：

I recommend creating another component Exemple:Item with it has it's own states edit,value states And pass the needed props to it which are the value,numbers,saveEdit(index,newValue),removeItem(index) and also the index

saveEdit has to be changed in section by passing the index and the newValue

I hope this clear for you

CodePudding user response：

add the map values in a component and add the states inside the component so you will have multiple states for each component not just 1

{section.items.map((item, i) => (
     <Component key={i} item={item}/>
)}

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);
   };
   ..................