I am working on a component that creates a form that is able to process objects that in turn contain arrays of objects.
For a better understanding, I have prepared a code sandbox that abstracts and isolates the problems as much as possible:
https://codesandbox.io/p/sandbox/usefieldarray-with-framer-animatepresence-sample-cz86fr
-
When selecting other values in the lists, the values/properties in the objects are not updated. Why? Can someone point me in the right direction?
-
For a more modern look, I use react-framer (AnimatePresence, motion.div) to animate the deletion and addition of new objects. When deleting the last object (see button “DeleteButtonWithoutMaterialIcon”), the MUI always issues several warnings:
“ MUI: A component is changing the controlled value state of Select to be uncontrolled.
Elements should not switch from uncontrolled to controlled (or vice versa).
Decide between using a controlled or uncontrolled Select element for the lifetime of the component.
The nature of the state is determined during the first render. It’s considered controlled if the value is notundefined.” .. (see also the console of the sandbox after deletion).
I have already tried to implement a workaround here via double deletion with AnimatePresence.onExitComplete(). This solves one aspect of the problem (the object was not deleted correctly from the array), but not the aspect of the warnings, see also the comments in Sample.tsx L 45 and 67.
Does anyone have an explanation for this behavior or can point me in the right direction?
Many thanks in advance for any helpful contributions.