Lightning-input Toggle is not unchecking by default based on For Each loop value in LWC

Question

I have created Lightning-input Toggle inside For Each loop. I am looping it through the Address collection. When Address is Active then I need to check the toggle and if Address is IsActive I need to uncheck the toggle. If I am printing the value inside Div its printing as True or False correctly but if I mention it as checked={address.IsActive} inside lightning-input its not working . Its displaying the Toggle as checked for all the loop values. Actually i need to display the Toggle as uncheck if the Address IsActive vlaue is False.

Tried all the possibilities "checked={address.IsActive === "true"} checked={address.IsActive === true} checked={address.IsActive}"

Below is the code and screenshot.

<template for:each={addresses} for:item="address">
    <li key={address.AddressKey}>
        <div class="slds-text-heading_small">{address.IsActive}</div>
        <lightning-input data-id="status" type="toggle" label="Status " value={address.IsActive} checked={address.IsActive} message-toggle-active="Active" message-toggle-inactive="Inactive"></lightning-input> 
    </li>
</template>

score 0 · Answer 1 · answered Dec 09 '21 at 06:33

I think for each loop over addresses , in which isActive is consider as string value rather than boolean value. That's why it is not showing the toggle as uncheck for false value. You can refer the below mention code and screenshot.

.js

 addresses = [
        {
            AddressKey : 1,
            IsActive : "true"
        },
        {
            AddressKey : 1,
            IsActive : false
        },
        {
            AddressKey : 1,
            IsActive : "true"
        },
        {
            AddressKey : 1,
            IsActive : "false"
        }
    ];

Hope this is helpful to you.
Thanks

Lightning-input Toggle is not unchecking by default based on For Each loop value in LWC

1 Answers1