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
Mirko Vukušić
Full(stack|dev|life)
I dont think you should handle DOM directly in React. It would make a mess and goes against React principles. You should forget about JQuery and just build React component that takes those arguments as inputs and outputs html/css