React Native Sorting Issue

Question

I am displaying an array (CatFilterPro) in a Flatlist, when a button is pressed I want to sort it by high price to low and when the other button is pressed do the reverse, the below code is working fine for the first press, but it could not sort it again after the first sort.

lowpricefilter() {

    this.fc= this.state.recentPro2
    this.fc.sort(function(a, b) {
        return Number(a.pro_price) - Number(b.pro_price);
    })
    this.setState({
        CatFilterPro: this.fc,
        modalVisible: false

    })   
}


highpricefilter() {
    this.fc= this.state.recentPro2
    this.fc.sort(function(a, b) {
        return Number(b.pro_price) - Number(a.pro_price);
    })
    this.setState({
        CatFilterPro: this.fc,
        modalVisible: false
    })   
}

Dan · Accepted Answer · 2018-10-09 15:48:50Z

1

sortByDescending = (a, b) => {
  if(a === b) return 0;
  if(a > b) return -1;
  return 1;
};

sortByAscending = (a, b) => a - b;

sort = sortFunction => {
  const { recentPro2: fc } = this.state;
  return fc.sort(sortFunction);
}

lowpricefilter = () => {
  const sortedAscending = this.sort(this.sortByAscending));
  this.setState({
    CatFilterPro: sortedAscending,
    modalVisible: false
  });
}

highpricefilter = () => {
  const sortedDescending = this.sort(this.sortByDescending));
  this.setState({
    CatFilterPro: sortedDescending,
    modalVisible: false
  });
}

edited Oct 9, 2018 at 15:48

answered Oct 9, 2018 at 14:34

Dan

8,9229 gold badges46 silver badges82 bronze badges

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

4 Comments

othman safadi Over a year ago

still it doesn't do the sort after the ascending or descending was done, it just sort for the first press

Dan Over a year ago

I've just updated my answer, I accidentally added 2 lowpricefilter. I've changed this now. If you still get the prob, let me know.

othman safadi Over a year ago

I did edited and try it, I don't think my problem is in the sorting part, its in the rendering, i console log the array and its quite sorted for asc and des but it doesn't display the items sorted in the flatlist just for the first sort it does display.

Dan Over a year ago

Try adding extraData={this.state} to your FlatList.

Anis D · Accepted Answer · 2018-10-09 14:34:10Z

0

You have to bind your functions in your constructor

this.highpricefilter = this.highpricefilter.bind(this);
this.lowpricefilter = this.lowpricefilter.bind(this);

answered Oct 9, 2018 at 14:34

Anis D

76111 silver badges25 bronze badges

1 Comment

othman safadi Over a year ago

I have bind the functions, its sorting fine for the first time i press the button but when i want to sort again, it doesn't.

Collectives™ on Stack Overflow

React Native Sorting Issue

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related