🐛 [#5040] Add unique key to Action component

Keys tell React which array item each component corresponds to, so that it can match them up later. They must be unique, see https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key

Previously, the key was set to the index of the action as it occurred in the actions array. After deletion of an action, the ActionSet would be regenerated, and the keys for the actions will start counting from 0 again. This means the keys were not unique, and it created unexpected behaviour when deleting an action.

Now, each Action will get a unique key using getUniqueRandomString.

src/openforms/js/components/admin/form_design/logic/actions/ActionSet.js

@@ -6,6 +6,7 @@ import {useImmerReducer} from 'use-immer';
 
 import ButtonContainer from 'components/admin/forms/ButtonContainer';
 import useOnChanged from 'hooks/useOnChanged';
+import {getUniqueRandomString} from 'utils/random';
 
 import Action from './Action';
 import {ActionError} from './types';
@@ -69,6 +70,7 @@ const reducer = (draft, action) => {
 };
 
 const ActionSet = ({name, actions, errors = [], onChange}) => {
+  console.log(actions)
   const [state, dispatch] = useImmerReducer(reducer, {
     actions: actions || [],
   });
@@ -94,7 +96,7 @@ const ActionSet = ({name, actions, errors = [], onChange}) => {
     <>
       {state.actions.map((action, index) => (
         <Action
-          key={index}
+          key={getUniqueRandomString()}
           prefixText={index === 0 ? firstActionPrefix : extraActionPrefix}
           action={action}
           errors={errors[index] || {}}