React state variable does not trigger rerender when sorted

Question

I want to implement a sortable table in React. I store the table's content as an array in a state variable using the useState hook. Now, when I sort the array and update the content state variable, I would expect the table to re-render since I updated the state. Unfortunately, that is not the case and the table does not display the sorting. Here is a simplified version of my issue. When I click on the table's header field "Name" I trigger the sorting and update of the state, but it does not rerender. Any idea what I am missing?

import { useState, useEffect } from 'react';

function App() {

  type Entry = {
    id: number;
    name: string;
  };

  const [collection, setCollection] = useState<Entry[]>([]);

  useEffect(()=> {
    // just initially populating collection with data for testing purposes
    setCollection([{id:1, name:"Ben"}, {id:2, name:"John"}, {id:3, name:"Anna"}])
  }, [])

  const byName = (a: Entry, b: Entry) => {
    let x = a.name.toLowerCase();
    let y = b.name.toLowerCase();
    if (x < y) {return -1;}
    if (x > y) {return 1;}
    return 0;
  }

  return (
    <div>
      <table>
        <tr id="head">
          <th>Id</th>
          <th onClick={() => setCollection(collection.sort(byName))}>Name</th>
        </tr>
        {collection.map((val, index) => 
          <tr id={index.toString()}>
            <td>{val.id}</td>
            <td>{val.name}</td>
          </tr>
        )}
      </table>
    </div>
  );
}

pass the collection state as dependency to useEffect. hope that works, and why are you putting setCollection inside useEffect? — Sami Ullah
– Sami Ullah, Commented Nov 2, 2022 at 9:55
I am just initially populating collection this way for testing purposes. — Sebastian Dine
– Sebastian Dine, Commented Nov 2, 2022 at 9:58

possum · Accepted Answer · 2022-11-02 10:10:58Z

3

The sort function sorts in place and returns the same reference, so you are mutating state, not updating it.

Do

<th onClick={() => setCollection([...collection].sort(byName))}>Name</th>

answered Nov 2, 2022 at 10:10

possum

2,9667 gold badges19 silver badges24 bronze badges

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

Collectives™ on Stack Overflow

React state variable does not trigger rerender when sorted

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related