CODEWITHSUNDEEP
javascriptreactjs
nishi
nishi

Reputation: 550

react state hook wont update on sort even making a copy of the state

so i am using a onClick even o a li.

this is the function:

const filterByName = () => {
        const copiedData = [...data];

        const sort = copiedData.sort((a: any, b: any) => a.fullName > b.fullName && b);
        setData(sort);
    }

if i log, the log displays correctly, but even making a copy of the data it wont cause the dom to rerender when i call setData.

data is an array of objects.

any tip?

Upvotes: 0

Views: 59

Answers (1)

Dacre Denny
Dacre Denny

Reputation: 30360

This is possibly caused by unique per-item key props not being rendered into your list, which is typically required to reliably sort/update rendered lists.

Ensure that you specify a key prop on each li element as shown:

<ul>
   { data.map((item) => (
   <li key={item.thisItemsUniqueId}> {/* <-- add unique key, per item */}
   Your per-list item display
   </li>)) }
</ul>

Also, update your sort callback to return a positive or negative number to correctly sort the resulting array, rather than a "boolean" result as detailed here:

const sort = copiedData.sort(
    (a: any, b: any) => (a.fullName > b.fullName && b) ? 1 : -1
    );

Upvotes: 2

Related Questions