Sort method in useEffect doesn't update the array in my state

Question

I'm trying to implement a Sort component that sort my items by name or ID.

This is my code:

const data = [
  {
    id: 1,
    name: "Gianni",
  },
  {
    id: 2,
    name: "Alvaro",
  },
  {
    id: 3,
    name: "Zuzzurello",
  },
  {
    id: 4,
    name: "Stefanino",
  },
  {
    id: 5,
    name: "Bertone",
  },
];

function App() {
  const [items, setItems] = useState(data);
  const [sort, setSort] = useState("");

  useEffect(() => {
    if (sort === "name") {
      const temp = [...items];
      temp.sort((a, b) => a.name - b.name);
      setItems(temp);
      console.log("sort by name!");
    } else if (sort === "number") {
      const temp = [...items];
      temp.sort((a, b) => a.id - b.id);
      setItems(temp);
      console.log("sort by number!");
    }
  }, [sort]);

  return (
    <main>
      <form>
        <label htmlFor="">sort by</label>
        <select name="sort" id="sort" onChange={(e) => setSort(e.target.value)}>
          <option value="">do nothing</option>
          <option value="name">by name</option>
          <option value="number">by number</option>
        </select>
      </form>
      {items.map((item, index) => {
        const { id, name } = item;

        return (
          <article key={index}>
            <h2>{name}</h2>
            <h4>{id}</h4>
          </article>
        );
      })}
    </main>
  );
}

The select input works: "setSort" changes in my State. The useEffect works too: when sort changes, I get those messages in the console.

The problem is that the sort method in the useEffect doesn't work at all. setCollection in my useEffect does NOT update the status with the new sorted array and it doesn't trigger a re render.

When i put "items" in the dependencies array, it throws an infinite loop instead.

I have no clue. Thanks!

Have you tried using the Id field as the Key in the article element... — Siddharth Seth, Jul 09 '21 at 16:58
Does this answer your question? [How to sort strings in JavaScript](https://stackoverflow.com/questions/51165/how-to-sort-strings-in-javascript) — Emile Bergeron, Jul 09 '21 at 17:17

score 4 · Answer 1 · answered Jul 09 '21 at 16:58

4

The biggest issue I see is that you can't sort strings by subtracting them:

console.log(
    ['a', 'd', 'c', 'x', 'b'].sort((a, b) => a - b)
)

You should instead use something like localeCompare:

console.log(
    ['a', 'd', 'c', 'x', 'b'].sort((a, b) => a.localeCompare(b))
)

answered Jul 09 '21 at 16:58

dave

62,300
5
72
93

seems to solve the string part. Thanks a lot!! – fra.mstr Jul 09 '21 at 17:04

score 1 · Answer 2 · answered Jul 09 '21 at 17:02

you can use this approach in useEffect

useEffect(() => {
    if (sort === "name") {
        setItems((previousState) => {
            return previousState.sort((a, b) => a.name - b.name);
        });
        console.log("sort by name!");
    } else if (sort === "number") {
        setItems((previousSTate) => {
            return previousSTate.sort((a, b) => a.id - b.id);
        });
        console.log("sort by number!");
    }
}, [sort]);

Sort method in useEffect doesn't update the array in my state

2 Answers2