Cannot read property 'sort' of undefined in reactjs

Question

I am getting following error TypeError: Cannot read property 'sort' of undefined when I am fetching the data from API and I want to sort and display the data, my sort function works with local static data but not with endpoint.

Below is the function for sorting

dynamicSort(property) {
        var sortOrder = 1;
        if(property[0] === "-") {
            sortOrder = -1;
            property = property.substr(1);
        }
        return function (a,b) {
            if(sortOrder == -1){
                return b[property].localeCompare(a[property]);
            }else{
                return a[property].localeCompare(b[property]);
            }        
        }
    }

Below is my render method

render() {
let data = this.props.brands.all_brands
data.sort(this.dynamicSort("name"));
console.log(data);
}

Below is my JSON Format

{
"all_items": [
{"name": "Banana"},
{"name": "Cat"},
{"name": "Apple"}
]
}

can you share the props you are passing to the component? It appears that this.props.brands does not contain an all_brands property — Robin Zigmond
– Robin Zigmond, Commented Jan 5, 2019 at 13:22

messerbill · Accepted Answer · 2019-01-05 13:23:18Z

2

JS tries to call the sort() method on a variable which is undefined at this time. I guess that your props are not passed at this time. If you are sure that you pass them to the component any time, you can simply add an if check:

render() {
  let data = this.props.brands.all_brands
  if (data) data.sort(this.dynamicSort("name"));
  console.log(data);
  // return your template
}

answered Jan 5, 2019 at 13:23

messerbill

5,6391 gold badge31 silver badges39 bronze badges

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

Comments

Andrei Voicu · Accepted Answer · 2019-01-05 13:26:01Z

1

Remote data is asynchronous, meaning it takes time to get it, so you need to treat the case in which you haven't got it yet:

all_brands is undefined, until the remote data is fetched:

render() {
    let data = this.props.brands.all_brands

    if (data) {
        data.sort(this.dynamicSort("name"));
        console.log(data);
    } else {
        return 'loading...'    
    }
}

answered Jan 5, 2019 at 13:26

Andrei Voicu

7501 gold badge6 silver badges13 bronze badges

Collectives™ on Stack Overflow

Cannot read property 'sort' of undefined in reactjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related