如何仅在 React 中的特定日期显示提醒

Question

In a component, I have a Calendar using react-calendar on the left side. I can add reminders via a form where I can select a date. These two dates are different displayed: the date from the react-calender is shown in the format 18/08/2021 while the date from the reminder form is shown as 2021-08-18.

How can I compare these two values so that only reminders are shown on the specific date when clicking on a calendar date? I tried to parse (which seems to be not recommended by MDN) but the output numbers are different. I tried to compare with valueOf() but the output is false.

EDIT:

I was able to compare both dates and the output is true. Therefore, I set a new prop to reminder "show" with the state of "false". But when I try to return this prop as true when both dates are the same, the prop does not change. (changing it manually with dev tools, the show/hide function works now perfectly fine).

In my index.js file, I created an onChange function when clicking a specific date in the calendar:

const onCalendarChange = (date) => {
    setDate(date);
    reminders.map((item) => {
      const itemDate = item.date
        .toLocaleString()
        .slice(0, 10)
        .replace(/\D/g, "");
      const calDate = date.toLocaleDateString().split("/").reverse().join("");
      console.log(itemDate === calDate);
      if (itemDate === calDate) {
        return {
          ...item,
          show: true,
        };
      }
      return item;
    });
  };

I also tried it with the filter() but this does not seem to work either. The reminders are shown the whole time.

 const onCalendarChange = (date) => {
    setDate(date);
    setReminders(
      reminders.filter(
        (item) =>
          item.date.toLocaleString().slice(0, 10).replace(/\D/g, "") ===
          date.toLocaleDateString().split("/").reverse().join("")
      )
    );
  };

Answer 1

1. First code snippet:

The first code snippet may not be working because you forgot to store the new array in a variable and reset reminders on the state using it (which you did correctly in the second code snippet).

So, the first code snippet should be something like this:

const updatedReminders = reminders.map((item) => {
      // logic here
});

setReminders(updatedReminders);

2. Second Code Snippet:

Not sure why this isn't working, YET. I'll let you know when I have an update.

In the meantime, see if my suggestion for the first code snippet does the trick?