1

Set active cell when click on it in ReactJs

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.

Submitted December 30th 2020 by Admin

Answers
0

onChange event callback returns moment object as parameter, so arr.includes(current) will not work. You should convert the moment object into some kinda type which can be compared.

For the quick workaround, you can convert it into ISO string with format() function.

const test = (date) => { arr.push(date.format());
};
if (arr.includes(current.format())) {

Admin | 9 months ago


0

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

Solution

You need to do an array search and do some value comparison. MomentJS date objects can be coerced to a number timestamp. Use array.prototype.find to compare each Moment object in the array to the current value, coercing each to the timestamp.

dateRender={(current) => { const style = {}; if (arr.find(date => +date === +current)) { style.border = "1px solid red"; style.borderRadius = "50%"; } return ( <div className="ant-picker-cell-inner" style={style}> {current.date()} </div> );
}}

Admin | 9 months ago



Relevant Questions