0

I'm having a problem in Lightning Web Components, what i'm trying to do is the following:

  • In a parent component i have a list of products which is an array of objects, like this:
[
    {
        Id: '12',
        quantity: '1',
        unitPrice: '1',
    },
    {
        Id: '123',
        quantity: '2',
        unitPrice: '2',
    },
    {
        Id: '1234',
        quantity: '3',
        unitPrice: '3',
    },
    {
        Id: '12345',
        quantity: '4',
        unitPrice: '4',
    },
    {
        Id: '123456',
        quantity: '5',
        unitPrice: '5',
    },
];

And every child will show each one of the products and can change the quantity of them (the problem will be here). Now what i'm doing is, everytime the child component changes the quantity, emits and event to the parent component to update the quantity of that particular product (since i need the list updated in the parent where i will handle the logic). Like this:

         let quantityData = {
             Id: '123',
             Quantity: '5'
         }
        const selectedEvent = new CustomEvent("quantitychange", {
             detail: quantityData
        });      
        this.dispatchEvent(selectedEvent);

And in the parent i do:

let receivedData = event.detail;
this.prodList[receivedData.Id].quantity = receivedData.Quantity;

This line of code is the problem:

this.prodList[receivedData.Id].quantity = receivedData.Quantity;

It doesn't update the value of that particular record, i tried many things in the developer console, but the value doesn't change. Another thing that i tried just to make sure this wasn't a problem in the parent side was this:

Playground test

What i'm doing in this example is to pass an object data into a child component and a text data. The object data cannot be changed even at the Child component level, so i'm not trying to update anything in the parent, just in the child. But for the text data, i can update, so i guess this problem as to do with the type of data we try to handle.

Now my question is: How to solve this? This means that we cannot update any data in object format passed from a parent?

1

For everyone with the same problem, i have a solution:

this.prodList = JSON.parse(JSON.stringify(this.prodList));

The problem is the following:

The component container receives the product list from the Apex side and if i see the list in the console i see this:

enter image description here

So i use the JSON.parse in the 2nd component and i'm able to change the values:

enter image description here

1
  • 1
    A little explanation here. In JS objects are always passed some by reference. That means in theory, you can use data to display at one place and at the same time change or in another. This is very hard to find and makes impossible to navigate in a codebase. So LWC makes data passed to a component immutable, at least on the receiving component side. But JSON parse(stringify(data)) creates a new mutable object instance. This way data is only changed on the child level, while original data stays unchanged – nchursin Jul 20 '20 at 4:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.