I have a child component that receives an array as a property:

<lightning-layout-item padding="around-small">
    <c-multi-pick-list label="Product Family" options={productfamilyoptions}></c-multi-pick-list>

when the parent component is loaded, the property is empty:

@track productfamilyoptions = [];

I have a @wire function that receives an array from the controller, and i am adding new values to the property productfamilyoptions:

@wire(getDataWrapper, { recordId: '$recordId', fields: '$productFields', showEval: '$showEval' })
        getData({ data, error }) {
            if (data) {
                this.assets = JSON.parse(JSON.stringify(data.assets)); //to be able to modify we dont do this.assets= data;

                var productFamilyArray = [];

                for(let i=0;i<this.assets.length;i++) {
                    if(!productFamilyArray.includes(this.assets[i].Product_Family__c)) {

                for(i=0;i<productFamilyArray.length;i++) {
            } else if ( error ) {
                this.error = error;
                this.assets = undefined;

After that function runs, the value of productfamilyoptions is:


The problem is that the child component c-multi-pick-list is not updating the values of productfamilyoptions. How do i update it?

  • Can you also add the multi-pick-list component code to see what you have there? Commented Dec 9, 2019 at 12:15

1 Answer 1


Tracked properties only cause re-rendering if their value changes. The value for an array is the array itself, not the content of the array. Make sure you do something like:

this.productfamilyoptions = [].concat(this.productfamilyoptions);

after you have pushed the new options onto it. That way the tracked property will cause re-rendering.

There are other ways to deal with this, but give it a try.

Worth also noting that a component MUST NOT change the value of one of its own @api properties (in case that is what you are trying to do). Such properties are for setting by code outside the component only (generally the parent component or a lightning builder page).

  • What is [].contact?
    – Dana Griff
    Commented Dec 9, 2019 at 12:48
  • Sorry. Typo fixed.
    – Phil W
    Commented Dec 9, 2019 at 13:26
  • @PhilW what are the other ways to deal with it?
    – Minz
    Commented Aug 13, 2020 at 17:36
  • Take a look at the documentation which covers some more recent changes affecting reactive value handling in the LWC framework.
    – Phil W
    Commented Aug 13, 2020 at 19:11

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .