2

I am getting below error in consoleenter image description here

My line of codes where error is showing:

import { LightningElement, api } from 'lwc';
export default class WebComponentModal extends LightningElement {
    @api isModalOpen = false;
    @api shippingCharges = 0.00;
    @api SalesTax = 0.00;
    @api state = 'PA';
    @api check = false;
    @api customString;
    constructor(){
    super();
    this.customString = {st: this.state, shipping: this.shippingCharges, sales: this.SalesTax, chk: this.check};
}

    closeModal() {
        this.isModalOpen = false;
    }

   /* submitDetails(){
        this.isModalOpen = false; 
    }*/

    get options(){
        return[
            {label: 'PA', value: 'PA'},
            {label: 'NY', value: 'NY'},
            {label: 'NJ', value: 'NJ'} 
        ];
    }

    handleChange(event){
        this.state = event.detail.value;
        console.log(this.state);
        if(this.state == 'PA'){
            this.SalesTax = .06;
            this.shippingCharges = 2.99;
            this.check = true;
        }else if(this.state == 'NY'){
            this.SalesTax = .08;
            this.shippingCharges = 7.99;
            this.check = true;
        }else if(this.state == 'NJ'){
            this.SalesTax = .07;
            this.shippingCharges = 5.99;
            this.check = true;
        }

        this.isModalOpen = false;

        console.log(this.SalesTax);
        console.log(this.shippingCharges);

        this.customString = {st: this.state, shipping: this.shippingCharges, sales: this.SalesTax, chk: this.check};

        console.log(this.customString);

        const selectedEvent = new CustomEvent('custevent', {
            detail : this.customString
        });
        //dispatching the custom event
        this.dispatchEvent(selectedEvent);

        

    }
}

The error is showing in customString at this.state. Infact similar error is showing for 'this.shippingcharges', 'this.salesTax', 'this.check'. What am I doing wrong?

2

As the error says, you can't set @api values off of other values at that time, because the values aren't ready yet, and cannot be read. Use the constructor() method to set those values.

@api customString;
constructor() {
  super();
  this.customString = {
    st: this.state, 
    shipping: this.shippingCharges, 
    sales: this.SalesTax, 
    chk: this.check
  };
}

You must call super() first when overriding a class and providing a constructor. You can set any @api variables in the constructor. This is the last time you'll be allowed to set the value before it becomes read-only.


Edit: However, you can't read API values until it's too late to set those values. In all likelihood, you need to make customString a tracked variable instead:

@track customString;

And then set the value in the connectedCallback handler:

@track customString;
connectedCallback() {
  this.customString = {
    st: this.state, 
    shipping: this.shippingCharges, 
    sales: this.SalesTax, 
    chk: this.check
  };
}
| improve this answer | |
  • 1
    i wonder constructor will work since public property value are not available in constructor according to lifecycle hooks. connectedCallback would be the right one. – sanket kumar Jul 8 at 13:39
  • @sanketkumar You cannot set @api values then. See this. – sfdcfox Jul 8 at 13:42
  • I have updated my code, I need to update the values later in the code as well. Using constructor, I am still getting the same error. – user75908 Jul 8 at 13:44
  • 1
    @user75908 Actually, I did some research. Apparently, you can't build API properties from other API this way. It should be @track instead. – sfdcfox Jul 8 at 13:45
  • check out this playground i have demonstrated what i mean to say. If it is connectedCallback, You can set the api value from other. – sanket kumar Jul 8 at 13:50

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.