I am trying to sort an array of objects based on a key and value parameter using react functions that I created

Question

I have a list of user objects in an array. I want to sort the different users in the array based on selected parameters like age, rank, ... I created functions that will use to let the user select how the ursers are rankd. I am trying to make the filtering functions but they are not working as i expected. here is my react component:

export default class Table extends Component {
    constructor(props) {
        super(props);
        this.state = {
            users: usersJSON,
            sort: this.props.filter
        }
        console.log(this.state.users)
    }

    componentWillReceiveProps() {

    }

    // complete the comparators
    compareByAge(a, b) {

    }

    compareByName(a, b) {

    }

    compareByPoints(a, b) {

    }

    compareByRank(a, b) {

    }

    render() {

        return (<div>
            <table className='table table-striped'>
                <thead>
                    <tr key='head'>
                        <th>Age</th>
                        <th>Name</th>
                        <th>Points</th>
                        <th>Rank</th>
                    </tr>
                </thead>
                <tbody>
                {
                    this.state.users.map((user, index) => {
                        return(
                            <tr key={index}>
                                <td>{user.age}</td>
                                <td>{user.name}</td>
                                <td>{user.points}</td>
                                <td>{user.rank}</td>
                            </tr>
                        )
                    })
                }
                </tbody>
            </table>
        </div>)
    }
}

I tried:

    compareByAge(a, b) {
    if(a < b){
        return -1
    }
    if(a = b){
        return 0
    }
    if(a > b){
        return 1
    }
}

compareByName(a, b) {
    if(a < b){
        return -1
    }
    if(a = b){
        return 0
    }
    if(a > b){
        return 1
    }
}

compareByPoints(a, b) {
    if(a < b){
        return -1
    }
    if(a = b){
        return 0
    }
    if(a > b){
        return 1
    }
}

compareByRank(a, b) {
    if(a < b){
        return -1
    }
    if(a = b){
        return 0
    }
    if(a > b){
        return 1
    }
}

and here is the user objects

[ { rank: 3, points: 3123, name: 'Marlana J. Huff', age: 41 },                                                                                                                                                                                                                                                                                                 
  { rank: 10, points: 45345, name: 'Susan D. Jimenez', age: 42 },                                                                                                                                                                                                                                                                                              
  { rank: 14, points: 312, name: 'Richard M. Mass', age: 11 },                                                                                                                                                                                                                                                                                                 
  { rank: 13, points: 3124, name: 'Joan T. Covert', age: 13 },                                                                                                                                                                                                                                                                                                 
  { rank: 20, points: 31, name: 'Joseph S. Perez', age: 23 },                                                                                                                                                                                                                                                                                                  
  { rank: 19, points: 6546, name: 'John R. Green', age: 24 },                                                                                                                                                                                                                                                                                                  
  { rank: 9, points: 452, name: 'Elizabeth R. Olsen', age: 15 },                                                                                                                                                                                                                                                                                               
  { rank: 1, points: 134, name: 'Sharon R. Ryan', age: 25 },                                                                                                                                                                                                                                                                                                   
  { rank: 24, points: 64563, name: 'Stacey D. Ward', age: 30 },                                                                                                                                                                                                                                                                                                
  { rank: 2, points: 755463, name: 'George K. Pancoast', age: 35 },                                                                                                                                                                                                                                                                                            
  { rank: 18, points: 42342, name: 'Dorothy J. Carroll', age: 33 },                                                                                                                                                                                                                                                                                            
  { rank: 23, points: 1241, name: 'Louis E. McCrae', age: 65 },                                                                                                                                                                                                                                                                                                
  { rank: 15, points: 654645, name: 'Camille B. Burton', age: 17 },                                                                                                                                                                                                                                                                                            
  { rank: 4, points: 5345345, name: 'Tommye R. Robinson', age: 18 },                                                                                                                                                                                                                                                                                           
  { rank: 17, points: 342, name: 'Grace C. Smith', age: 19 },                                                                                                                                                                                                                                                                                                  
  { rank: 22, points: 213, name: 'Jennifer C. West', age: 20 },                                                                                                                                                                                                                                                                                                
  { rank: 25, points: 34242, name: 'John L. Sandlin', age: 21 },                                                                                                                                                                                                                                                                                               
  { rank: 21, points: 52342, name: 'Margarita D. Lambert', age: 43 },                                                                                                                                                                                                                                                                                          
  { rank: 5, points: 42342, name: 'Thomas M. Hawkins', age: 32 },                                                                                                                                                                                                                                                                                              
  { rank: 8, points: 354, name: 'Joseph J. Freeman', age: 22 },                                                                                                                                                                                                                                                                                                
  { rank: 6, points: 7675, name: 'Arlene R. Grimes', age: 29 },                                                                                                                                                                                                                                                                                                
  { rank: 7, points: 274, name: 'Michael E. Rogers', age: 10 },                                                                                                                                                                                                                                                                                                
  { rank: 12, points: 105, name: 'Alice J. Goldsmith', age: 37 },                                                                                                                                                                                                                                                                                              
  { rank: 16, points: 18978, name: 'Robert O. Lambert', age: 40 },                                                                                                                                                                                                                                                                                             
  { rank: 11, points: 103596, name: 'Felix M. Seeber', age: 39 } ]          

Answer 1

If you want it to be sorted by age by default, then you can set it into the state directly as below:

this.state = {
            users: usersJSON.sort(this.compareByAge),
            sort: this.props.filter
        }

Try this functions,

compareByName(a, b) {
    if(a.name < b.name){
        return -1
    }
    if(a.name == b.name){ // you were making mistake here by a = b instead of a==b
        return 0
    }
    if(a.name > b.name){
        return 1
    }
}

compareByAge(a, b) {
    if(a.age < b.age){
        return -1
    }
    if(a.age == b.age){
        return 0
    }
    if(a.age > b.age){
        return 1
    }
}

compareByPoints(a, b) {
    if(a.points < b.points){
        return -1
    }
    if(a.points == b.points){
        return 0
    }
    if(a.points > b.points){
        return 1
    }
}

compareByRank(a, b) {
    if(a.rank < b.rank){
        return -1
    }
    if(a.rank == b.rank){
        return 0
    }
    if(a.rank > b.rank){
        return 1
    }
}

Answer 2

The functional code below invokes a series of functions through currying . So the syntax looks a little odd. To use this functional code, you call sort followed by two sets of parentheses. The first set contains a reference to the data array and the second set contains a string that represents the "key" you want to sort on. Once you obtain the sorted data then you can just use setState() to put the sorted list into your users state variable.

So sort(data)('name'); will sort an array of objects named data by the key name . You'll see the function call in the console.log() below:

 const data = [ { rank: 3, points: 3123, name: 'Marlana J. Huff', age: 41 }, { rank: 10, points: 45345, name: 'Susan D. Jimenez', age: 42 }, { rank: 14, points: 312, name: 'Richard M. Mass', age: 11 }, { rank: 13, points: 3124, name: 'Joan T. Covert', age: 13 }, { rank: 20, points: 31, name: 'Joseph S. Perez', age: 23 }, { rank: 19, points: 6546, name: 'John R. Green', age: 24 }, { rank: 9, points: 452, name: 'Elizabeth R. Olsen', age: 15 }, { rank: 1, points: 134, name: 'Sharon R. Ryan', age: 25 }, { rank: 24, points: 64563, name: 'Stacey D. Ward', age: 30 }, { rank: 2, points: 755463, name: 'George K. Pancoast', age: 35 }, { rank: 18, points: 42342, name: 'Dorothy J. Carroll', age: 33 }, { rank: 23, points: 1241, name: 'Louis E. McCrae', age: 65 }, { rank: 15, points: 654645, name: 'Camille B. Burton', age: 17 }, { rank: 4, points: 5345345, name: 'Tommye R. Robinson', age: 18 }, { rank: 17, points: 342, name: 'Grace C. Smith', age: 19 }, { rank: 22, points: 213, name: 'Jennifer C. West', age: 20 }, { rank: 25, points: 34242, name: 'John L. Sandlin', age: 21 }, { rank: 21, points: 52342, name: 'Margarita D. Lambert', age: 43 }, { rank: 5, points: 42342, name: 'Thomas M. Hawkins', age: 32 }, { rank: 8, points: 354, name: 'Joseph J. Freeman', age: 22 }, { rank: 6, points: 7675, name: 'Arlene R. Grimes', age: 29 }, { rank: 7, points: 274, name: 'Michael E. Rogers', age: 10 }, { rank: 12, points: 105, name: 'Alice J. Goldsmith', age: 37 }, { rank: 16, points: 18978, name: 'Robert O. Lambert', age: 40 }, { rank: 11, points: 103596, name: 'Felix M. Seeber', age: 39 } ] let sort = (data) => (key) => [...data].sort((first, second) => first[key] > second[key]); console.log(sort(data)('rank')); console.log(sort(data)('points')); console.log(sort(data)('name')); console.log(sort(data)('age'));