1

I have a lightning button and I have an instance of js Date class.

When I click on a button I want it to to show me a date that was week before (subtract 7 days).

Here is my .html file:

<template>
    <button class="slds-button slds-button_neutral" onclick={handleClick}>
        <label>
        new date
        </label>
    </button>
    {date}
    {test} <!-- for some reason this renders a new value together with date, but only on a first click -->
</template>

and here is my .js file:

import {LightningElement} from 'lwc'; 

export default class DemoCard extends LightningElement
{
    
    date;
    test;

    handleClick (event)
    {
        this.date.setDate (this.date.getDate () - 7); //shows desired date but only on a first click        
        this.test = this.date; //without test desired value doesn't render on click at all
    }


    connectedCallback ()
    {
        this.date = new Date ();
    }
}

Why isn't new value rendered each time when I click on a button?

2
  • The date's internal state is being updated and this isn't being noticed by the LWC framework. Have you tried using @track date when declaring the property? You'll need to import track along with the LightningElement.
    – Phil W
    Commented Jun 19, 2023 at 10:58
  • @PhilW decorated the date property with track but nothing has changed :(
    – Appendix
    Commented Jun 19, 2023 at 11:03

1 Answer 1

3

Date is an object, not a primitive, so this.date holds a reference, therefore its value doesn't change when you run setDate(). That's why the framework doesn't rerender it.

Reactivity for Fields, Objects, and Arrays (emphasis mine)

If a field’s value changes, and the field is used in a template or in a getter of a property that’s used in a template, the component rerenders and displays the new value. If a field is assigned an object or an array, the framework observes some changes to the internals of the object or array, such as when you assign a new value.

@track doesn't help here. It works only with plain objects created with {}.

In order to rerender it, you don't need test, you just have to create a new reference, so a new Date object:

handleClick (event)
{
    this.date = new Date(this.date.setDate(this.date.getDate() - 7));
}

The first time, and only that time, it rerenders because test changes from undefined to the reference of this.date.
On every other click after the first, the value of test doesn't change.

You must log in to answer this question.

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