Array sort with React.useState breaks when adding certain date

Question

I'm trying to add a date in a list and sort that list to ascending every time I add a new date. Everything is fine, the list is being resorted when every new data is inserted, but if I start to add this date 13/02/22 the re-sorting will seem to have stopped and the new date inserts will be will just stack to each other/latest insertion will be the last regardless of its actual date.

Here is my code when adding a date to the list. And the useEffect in here is my sorting logic. As you can see I sort my list of dates by calling the setAddedOpens which is a React.useState.

const [addedOpens, setAddedOpens] = React.useState(defaultOpens);
 const [toggleSort, setToggleSort] = React.useState(false);

      const _addOpens = () => {
        for (let week = 0; week <= repeatWeeks; week++) {
          const OFI = new Date(getValues('OFIdate'));
    
          setAddedOpens((prevOpens) => [
            ...prevOpens,
            {
              ofi: format(OFI.setDate(OFI.getDate() + 7 * week), 'dd/MM/yyyy'),
              start: format(getValues('startTime'), 'hh:mm a'),
              end: format(getValues('endTime'), 'hh:mm a')
            }
          ]);
        }
    
        setToggleSort((toggle) => !toggle);
      };
    
      React.useEffect(() => {
        setAddedOpens([...addedOpens].sort((a, b) => new Date(a.ofi) - new Date(b.ofi)));
      }, [toggleSort]);

Don't mind the other parts of my code here. Because I also have a feature you can bulk add dates. But in the meantime let's say I'm just adding a single date every time I click ADD and thatrepeatWeeks state is always 0.

I'm not so sure what could be the problem is. Maybe I'm missing something in my logic? Or this has something to do with dates or date formatting? Why is the sorting getting erroneous once I added the date 13/02/22 ?

Thanks in advance.

The format dd/mm/yy is not supported by ECMA-262 so parsing is implementation dependent. Likely new Date('13/02/22') returns an invalid date so sorting fails. See Why does Date.parse give incorrect results? — RobG
– RobG, Commented Feb 4, 2022 at 9:15

lpizzinidev · Accepted Answer · 2022-02-04 13:19:29Z

1

Try to add an additional property to the Object, let's call it ofi_sorting, that stores the date in the yyyy-MM-dd format and use that field for sorting the values:

    setAddedOpens((prevOpens) => [
      ...prevOpens,
      {
        ofi: format(OFI.setDate(OFI.getDate() + 7 * week), 'dd/MM/yyyy'),
        ofi_sorting: format(OFI.setDate(OFI.getDate() + 7 * week), 'yyyy-MM-dd'),
        start: format(getValues('startTime'), 'hh:mm a'),
        end: format(getValues('endTime'), 'hh:mm a'),
      },
    ]);
  }

  setToggleSort((toggle) => !toggle);
};

React.useEffect(() => {
  setAddedOpens(
    [...addedOpens].sort((a, b) => a.ofi_sorting - b.ofi_sorting)
  );
}, [toggleSort]);

edited Feb 4, 2022 at 13:19

answered Feb 4, 2022 at 7:57

lpizzinidev

13.3k2 gold badges15 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

quielfala Over a year ago

This seems to have worked. Thank you. Let me do further test.

quielfala Over a year ago

Thanks again. I'll use this solution. I guess what happened here is a bug in javascript dates?

lpizzinidev Over a year ago

Probably related to the fact that the Date constructor may interpret the first digit as the month using an xx/xx/xxxx format, depending on the locale. In general, when comparing dates, it is better to use the yyyy-MM-dd format.

quielfala Over a year ago

I noticed I still have sorting issue. Though I eliminated the problem with the specific date in my post. I'll further investigate, but if you have something to add that would be really appreciated.

RobG Over a year ago

Incidentally, if the format is yyyy-MM-dd then there is no need to convert to Date objects, the strings can be compared directly as (a, b) => a - b or (a, b) => a.localeCompare(b). :-)

|

Collectives™ on Stack Overflow

Array sort with React.useState breaks when adding certain date

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related