What is the equivalent of the following code:

           pick_attribute = moment(`2017-${month}-${day}`).format('x');
           // toggle colors
           color = day.hours >=3  ? 'orange' : color
           color = day.hours >=3 && day.hours <6 ? 'green' : color
          //inject number of hours worked into calender view 
            $(`div[data-pick='${pick_attribute}']`).
            append(`<small class='${color}-text'>${day.hours}h</small>`);
           });

I am using pickadate.js and trying to add some styles based on a timesheet API. So if XX hours worked, I can add that as colored text in each of the corresponding date. My pick_attribute is calculated from moments Unix Timstamp which is accurate and is able to get the element with that data attribute, so no problem there.

This code works as expected when I open the calendar but only the first open and other times it reverts. If I change the month frequently back and forth, I can see some of the changes in other months.

I am assuming is a is the virtual DOM and DOM not being insync but IDK. I am using the pickadate calender within materializeCSS The data-pick attribute is provided by the library and is unique(UNIX Timestamp). Any thoughts on how I can do the same in react so I can try this differently? Thanks