Hi 
I’m trying to dynamically render a few repeated form fields based on a state $state.articleArray which defaults to [0] .
The fields are rendered based on the repeat element functionality and the given parameters:
collection: $state.articleArray
indexName: currentIndex
elementName: currentElement (didn’t use it for anything here)
I have one button adding to this array by using:
onClick -> action: update state -> state: $state.articleArray -> operation: Add element -> value: 0
(So by clicking twice I add 2 elements to this array, which will then look as follows: [0,0,0]
And a button rendered for each of the repeated fields which is supposed to delete the given field:
onClick -> action: update state -> state: $state.articleArray
operation: Remove elements, start index: currentIndex, number of elements to remove: 1
It works, but:
- The element deleted is the last one in the array, not the ‘currently clicked’ one
- After deleting a field and then adding a field, the old (deleted) field reappears filled with the previous data
- Submitting such and logging the form body shows all the elements that were ever added to the array, even if they were later deleted
Am I missing something there and could improve the repetition so the mechanism works in a more reliable way?
I even tried this verbose code from below to overwrite the variable but it works exactly as the functionality provided by Plasmic
console.log("LOGGING the array", $state.articleArray);
const tempArray = [...$state.articleArray];
console.log("logging the temp array:", tempArray);
console.log("logging the current index:", currentIndex);
console.log("manipulating the data");
const outputArray = tempArray.filter((_, idx) => {
return idx !== currentIndex;
});
console.log("logging the output array:", outputArray);
$state.articleArray = outputArray;
console.log("new data:");
console.log($state.articleArray)