Set active cell when click on it in ReactJs

Question

I have this component:

const arr = [];

const test = (date) => {
  arr.push(date);
};

ReactDOM.render(
  <Space direction="vertical" size={12}>
    <DatePicker
      onChange={test}
      open={true}
      showNow={false}
      dateRender={(current) => {
        const style = {};
        if (arr.includes(current)) {
          style.border = "1px solid red";
          style.borderRadius = "50%";
        }
        return (
          <div className="ant-picker-cell-inner" style={style}>
            {current.date()}
          </div>
        );
      }}
    />
  </Space>,
  document.getElementById("container")
);

The idea is next: when I click on the specific date it should be applied next styles:

if (arr.includes(current)) {
  style.border = "1px solid red";
  style.borderRadius = "50%";
}

I don't now why, but it does not work. I want when I will click on the date to apply these styles and when I click back on the same cell to deselect the styles, but my condition does not work. Who can help?

Link to codesandbox.

Answer 1

Issue

The issue is that both current and the values pushed into arr are objects and not simple values. Objects can only be equal if they are reference equal.

const foo1 = { a: 'bar' };
const foo2 = { a: 'bar' };
const foo3 = foo1;

console.log(foo1 === foo2); // false
console.log(foo2 === foo3); // false
console.log(foo1 === foo3); // true

console.log([foo1].includes(foo2)); // false