I have recreated my problem in a simplified code example. Follow these steps to reproduce it:
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.
Here is my bad (ugly) workaround:
App.js
function open(e, item, itemIndex) {
setPropArgs({ ...propArgs, editThis: item, index: itemIndex, show: true, itemList: myList });
}
MyEditor.js
<Button type="button" onClick={(e) => props.save(edit, props.index, props.itemList)}>
Save
</Button>
App.js
function save(edit, index, itemList) {
// console.log(myList);
const newList = [...itemList];
newList[index] = edit;
setMyList(newList);
setPropArgs({ ...propArgs, show: false });
}
This is bad because MyEditor shouldn't need to know anything about the parent, it doesn't read or edit the list at all & there shouldn't be a need to pass around a copy of the state that could become out of date (if I wasn't blocking with the canvas).
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
});
}