Getting initial useState list values when returning from a sub componet to save data instead of current state

Question

I have recreated my problem in a simplified code example. Follow these steps to reproduce it:

1. Click on one of the three list items to edit the value in the off-canvas box.
2. Change the value and click the save button.
3. Select a different item to edit & save.
4. Note: the original edited item has reverted back to its initial state. I have the console.logging in the save method to show that the list(state) is not the current (visible) version but the initial state.

Sandbox code example

I have an inelegant solution(workaround) that I will put as an answer but it doesn't explain what or why this is happening. I have 3 off-canvas editors like this on my page & one does work as expected but the other two loose state when calling their save functions in the parent.

Answer 1

Okay... I found the answer that I was looking for. Thanks to Marco Nisi for this Answer to a very similar question that has not got much attention

My forked code solution here

The solution is to move the callback (save function) into be created when the canvas is shown instead of when the functional component is initialized creating a fresher clone of the state. I can still see this as being problematic if you have an example where the state is being updated in the background or if the off-canvas is not blocking other edits. Note: You don't need the callback defined in the open function but it does need to be added(replaced) to the props object there.

  function open(e, item, itemIndex) {
    save = (edit, index) => {
      console.log(myList);
      const newList = [...myList];
      newList[index] = edit;
      setMyList(newList);
      setPropArgs({ ...propArgs, show: false });
    };
    setPropArgs({
      ...propArgs,
      editThis: item,
      index: itemIndex,
      show: true,
      save: save
    });
  }