Why flatlist is not sorted after sorting the array?

Question

I'm creating a flatlist that outputs array of object from an API. Before outputting the array, It will be sorted alphabetically and another data will be added at the top of the array. The problem is that the data is not sorted when rendered in the flatlist and the new data that was added is missing.

const defaultListTab = {id: 18, name: "All"};
const [listTab, setListTab] = React.useState([]);

.then(function (result) { 
    setListTab(result.data.categoriesData)
    listTab.sort(function (a, b){
        if(a.name.toLowerCase() < b.name.toLowerCase()) {
            return -1;
        } else if(a.name.toLowerCase() > b.name.toLowerCase()) {
            return 1;
        }
        return 0;
    });
    setListTab(listTab => [defaultListTab, ...listTab])
)};
return () => abortCont.abort();

This is what the array looks like originally:

Array [
  Object {
    "id": 29,
    "name": "Fruit",
  },
  Object {
    "id": 30,
    "name": "Vegetable",
  },
  Object {
    "id": 31,
    "name": "Dessert",
  }
]

leonardomdr · Accepted Answer · 2022-07-17 09:41:37Z

1

In your first call to setListTab you're setting the state to result.data.categoriesData.

Then you're trying to sort listTab, but in this moment, the state still empty [], because react have not rendered it yet.

Sort the results of your request before, than later set the state.

Something like this:

result.data.categoriesData.sort()...

setListTab([defaultListTab, ...result.data.categoriesData]);

answered Jul 17, 2022 at 9:41

leonardomdr

1596 bronze badges

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

Comments

R4ncid · Accepted Answer · 2022-07-17 08:45:51Z

0

the problem is that listTab is not updated instantly because setListTab is an async operation

change your code like this

const defaultListTab = {id: 18, name: "All"};
const [listTab, setListTab] = React.useState([]);

.then(function (result) { 
    setListTab(result.data.categoriesData)
    
    setListTab(listTab => {
      listTab.sort(function (a, b){
        if(a.name.toLowerCase() < b.name.toLowerCase()) {
            return -1;
        } else if(a.name.toLowerCase() > b.name.toLowerCase()) {
            return 1;
        }
        return 0;
    });
    return [defaultListTab, ...listTab]

    })

when you use a callback inside you setState function it will get the updated value

answered Jul 17, 2022 at 8:45

R4ncid

7,1651 gold badge8 silver badges21 bronze badges

1 Comment

Nomel Over a year ago

i tried your method but the flatlist doesnt show any of the data. After the then(), I implement a return () => abortCont.abort();. Having the return inside then() would ignore the abort(), right?

Collectives™ on Stack Overflow

Why flatlist is not sorted after sorting the array?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related