So it seemed to be some issue possibly with real vs virtual DOM and I found the result as someone used a Timeout to fix a different issue. But i tried that in my code and it resolved it, so i wrapped my logic into this.

setTimeout(() => {
    [...yearCells].forEach(yearCell => {
        for (var count = 0; count < this.state.yearsThatCoveragesWereChanged.length; count++) {
            if (this.state.yearsThatCoveragesWereChanged[count].effectiveFrom === yearCell.innerText) {
                 //logic
            }
        }
    });
}, 0);

When i am using ANTD DatePicker and use the arrows to go to the next panel. The UI updates but i cannot extract the live values form a HTMLCollection or NodeList.

First time I open the panel:

    var yrCell = document.getElementsByClassName("ant-calendar-year-panel-year");

    console.log(yrCell) // logs 2019-2030 in a HTMLCollection

    for (let item of yrCell) {
        console.log(item.innerText); // logs 2019-2030
    }

    for (let i = 0; i < yrCell.length; i++) {
        console.log(yrCell[i]); // logs 2019-2030
    }

    console.log(yrCell) // logs 2019-2030 in a HTMLCollection

The issue is now when I click the “Next” arrow on the panel

    var yrCell = document.getElementsByClassName("ant-calendar-year-panel-year");

    console.log(yrCell) // logs 2029-2040 in a HTMLCollection

    for (let item of yrCell) {
        console.log(item.innerText); // STILL logs 2019-2030
    }

    for (let i = 0; i < yrCell.length; i++) {
        console.log(yrCell[i]); // STILL logs 2019-2030
    }

    console.log(yrCell) // logs 2029-2040 in a HTMLCollection

If the HTMLCollection has updated and the UI has updated and siaplays the ‘later’ values and in my code there I am reading the newer values before and after I try extract a specific value from it, how are the values not live ?

Any help really appreciated!