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.

Answer 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]);