material ui - how to sort an array by string and number and date property using reactjs?

Question

Hi I made a project and sort in three ways:date,title,number but all of them are not working even through there is no any bug notification.So I do not know how to entry the bugging process.Please help me,thanks.

import ColorCards from "./ColorCards";
import React, { useState } from "react";
import data from "./initialState.json";
import { v4 as uuidv4 } from "uuid";

export default function CardsafterEvents({ title, color }) {
  const [colors, setColors] = useState(data.colors);
  const onRemove = (id) => {
    const newcolors = colors.filter((color) => color.id !== id);

    setColors(newcolors);
  };
  const AddColor = (title, color, timestamp) => {
    const newcolors = [
      ...colors,
      {
        id: uuidv4(),
        title: title,
        color: color,
        timestamp: timestamp
      }
    ];
    setColors(newcolors);
  };
  const SortbyDate = () => {
    const newcolors = colors.sort(
      (a, b) => new Date(b.date) - new Date(a.date)
    );
    setColors(newcolors);
  };
  const SortbyTitle = () => {
    const newcolors = colors.sort((a, b) =>
      a.title > b.title ? 1 : b.title > a.title ? -1 : 0
    );
    setColors(newcolors);
  };
  const SortbyRating = () => {
    const newcolors = colors.sort((a, b) => a.rating - b.rating);
    setColors(newcolors);
  };
  return (
    <>
      <ColorCards
        dataColors={colors}
        handleDelete={onRemove}
        HandleColor={AddColor}
        onDate={SortbyDate}
        onTitle={SortbyTitle}
        onRating={SortbyRating}
      />
    </>
  );
}

Full project link:https://codesandbox.io/s/material-demo-forked-62eh0?file=/CardsafterEvents.js:0-1330

question from:https://stackoverflow.com/questions/66068157/how-to-sort-an-array-by-string-and-number-and-date-property-using-reactjs

Answer 1

Your code would have worked if not for the fact that your Sort functions are mutating the state variable. Yes, sort will mutate the original array and thus this:

const newcolors = colors.sort((a, b) =>
      a.title > b.title ? 1 : b.title > a.title ? -1 : 0
    );

actually alters your colors state variable. Of course, that's a no no in React. I will show you how to make your SortbyTitle function work and you can do the same for the other Sort functions as well. You need to create a copy of the sate variable and only then use sort on it. Try this:

  const SortbyTitle = () => {
    const copy_of_ar = JSON.parse(JSON.stringify(colors));
    copy_of_ar.sort((a, b) =>
      a.title > b.title ? 1 : b.title > a.title ? -1 : 0
    );

    setColors(copy_of_ar);
  };

And here is a Sandbox for you with a working Title sorter.