Data sort method not working in javascript

I would post a comment if I could, but I do not have the reputation. Anyway, keep in mind that if you provided a full example of what was happening it would be easier to help. There are a lot of issues with the information you provided that make it difficult to help.

The updated data you provided still seems incomplete. The view I have is cut off in the second item of the array after the property:

"state": "OR",

You reference sorting by town or county (state.townOrCounty), but the data just seems to have state and country.

Again, with something like this, it might help to make a jsfiddle or something to show what works and what does. I tried creating one at https://jsfiddle.net/c5fgy291/4/. You are welcome to look at it and see if it helps. it sorts your limited data from min to max or max to min. I gave up on calling the sort function the way you did, but that might still work. Sorry I couldn't be more help.

A couple of notes I had right off the bat is that it looked like you were trying to change the state of your object by directly editing its value; ie

if (!this.props.mainListFetching && !this.props.mainListError) {  
    this.highestOrLeast = this.sortingData(this.props.mainList, this.state.percentageHighestOrLeast)
    this.townOrCounty = this.sortingData(this.props.mainList, this.state.townOrCounty)
    this.amountMaximumOrMinimum = this.sortingData(this.props.mainList, this.state.amountMaximumOrMinimum)
}

You should be using the setState function. In the fiddle I made, I wrote a separate function that showed it being used. In my fiddle, I assumed you wanted to change the order that the items in the data were displayed based on amount pledged, or town they live in, or something. To do that, your data should be part of the state of the component. That way, you can sort your data (ideally, a copy of the data, I think), and then update the state. I added buttons in the fiddle that let you sort by min and max.

So, here is my initial state declaration.

 state = {
        percentageHighestOrLeast: "highest", 
        townOrCounty: "town",  
        amountMaximumOrMinimum: "minimum", 
        pledges: data.slice(0),   //  data is outside of component In my implementation
    }

And here, this is a block that you could place somewhere when you want to make sure it is sorted. Not in the render function, though, because that is called after the state is updated. In my example, it is called from a button click. {

  if (!this.props.mainListFetching && !this.props.mainListError) {
    const newData = this.sortingData(this.state.pledges, "somethingHere");
    this.setState({
        pledges: newData,
    })                

}

When the setState is called, the render function will automatically be called. My render function is something like this (I'm showing this to illustrate that the having the data included in the state lets it update automatically. also note that I wrote a separate Pledge component).

render() {
    <h3>Pledges</h3>

      {this.state.pledges.map((pledge, i) => <Pledge { ...pledge } key={pledge['s.no']}  />)}
    </div>;
  }
}