LWC Invalid Mutation error when copying data from a @api property

Question

I am passing data from the flow to the lwc component, making a copy of it and then adding a new key-value pair to each item in the array. The below code does not produce any errors but it doesn't work as expected.I have read that a direct copy and modification of the data from an api variable is not possible and that is why I tried using JSON.parse below.

@api availablePartsList;
data = [];
connectedCallback() {
        this.data = [...this.availablePartsList];

        this.data.forEach((part) => {
            part.IsReplace = false;
        });
    }

Answer 1

part.IsReplace = false is a mutation of the object. You need to copy the object. Typically, when I add a field, I'll use the ... operator to copy the existing object and add new properties at the same time.

this.data = this.availablePartsList.map(
  (part) => ({ ...part, IsReplace: false })
);

The () => ({ }) notation is an arrow function that returns an object, and { ...variable } is the spread syntax. It performs a shallow copy.