0

I have encountered an error of
LWC1503: Invalid public property initialization for "booleanVariableName". Boolean public properties should not be initialized to "true", consider initializing the property to "false".

I think this error is related to this LWC developer guide, Boolean Properties.

In my case, boolean value is set dynamically in HTML such as:

<!-- parent.html -->
<template>
    <c-bool show={booleanVariableName}></c-bool>
</template>

So, I thought I can toggle boolean value either true or false from JavaScript, so I could set booleanVariableName to true.

I don't understand why LWC has this limitation, does somebody please explain to me?

1
  • Please edit this question to add snippets of your actual code including the property declaration, how it is used and how the parent is trying to set it. Using samples from the documentation does not help if it is not identical to your usage.
    – Phil W
    Feb 14, 2023 at 7:17

2 Answers 2

1

as per the documentation says

Always set the default value for a boolean public property to false. If you set the default value to true instead in bool.js, there’s no way to statically toggle the value to false in markup.

in you question you specified you need to toggle between true and false dynamically, if it's possible, initialize the booleanVariableName to false and then you can toggle to change it to true

In your Parent.js add

@api booleanVariableName=false

Here's an Example

Parent.Js

import { LightningElement } from 'lwc';

export default class Parent extends LightningElement {
    @api booleanVariableName = false;

    handleClick() {
        this.booleanVariableName = !this.booleanVariableName;
    }
}

Parent.html

<template>
    <button onclick={handleClick}>Toggle Boolean</button>
    <c-bool show={booleanVariableName}></c-bool>
</template>

but if your use case is that it should be true from the begining you can use this

import { LightningElement, api } from 'lwc';

export default class MyComponent extends LightningElement {
    @api booleanVariableName = false;

    connectedCallback() {
        // Set the boolean property to true dynamically
        this.booleanVariableName = true;
    }
}

2
  • Hi @Aman Patil, Thank you for your thorough explanation. But I still wonder why we have to set default boolean value as a false. As we can toggle boolean value by handleClick function by HTML and JavaScript, It seems "Okay" to set default value as true as well. Is it just a specification of LWC?
    – mkzyk
    Feb 14, 2023 at 7:19
  • Hi @mkzyk, as documentations says "Boolean attributes on standard HTML Elements are set to true by adding the attribute to the element. The absence of the attribute defaults the attribute to false. Therefore, the default value of an attribute is always false. Lightning web components use the same principle for boolean properties".
    – Aman Patil
    Feb 14, 2023 at 7:24
1

This can be used as a work around.

@api booleanVariableName = !false;

1
  • Does this avoid the "unable to statically toggle the value to false in markup" issue mentioned in the documentation?
    – Derek F
    Sep 22, 2023 at 18:55

You must log in to answer this question.

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