I'm reading about lwc properties and came across a statement.

A component that declares a public reactive property can’t set the property value, except at component construction time. A parent component that uses the component in its markup can set the component’s public property value. In our example, the c-todoitem component can’t update the value of the itemName property in the todoitem.js file.

Based on the above statement I can't set a public reactive property(@api), except for the component construction time. I know we can use getters and setters to set the value, but it does involve declaring a private reactive property(@track).

In this context what is the meaning of component construction time. Is there another way to set the value of public reactive properties in the declared component without the interference of the private reactive properties?

1 Answer 1


It simply means that you need to set the value in just one of two places. Both will be demonstrated here, as well as what's not:

export default class AppName extends LightningElement {
  @api message1 = 'Default message'; // allowed
  @api message2;
  constructor() {
    super(); // must be called, and must be called before using 'this'
    this.message2 = 'New default message'; // also allowed
  onclickhandler() {
    this.message1 = 'Try to change on click...'; // not allowed

Note that the constructor is always called constructor, unlike Java and other languages where the constructor is the class' name.

After defining it either inline or via constructor, you are no longer allowed to modify the property at all. It becomes read-only. If you want to be able to communicate to the parent component, the get/set combination is required.

  • +1 Thanks for the explanation, I was able to test the default message however when I try testing New default message Eslint throws a super error. Couple of ways I tried constructor() {this.message1 = 'New default message'; // also allowed } and @api message2 ;constructor(message2){ this.message2 = 'New default message'; // also allowed } Dec 16, 2018 at 0:38
  • 1
    @codeyinthecloud I cleaned up the code to include a proper demonstration, thanks for the suggestion.
    – sfdcfox
    Dec 16, 2018 at 0:43
  • Great, super(); does the trick. Thanks again, sometimes It's hard to move forward in the documentation being stuck at once place! You saved my day! Dec 16, 2018 at 0:45
  • @codeyinthecloud I've already put something like 10-12 hours playing with this already. The more I learn, the more I think I'm going to like it.
    – sfdcfox
    Dec 16, 2018 at 0:46
  • 1
    The official docs are being updated to clarify that you can only set the default value of an @api property. The parent component can always override the value. Dec 24, 2018 at 6:33

You must log in to answer this question.

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