{

How to sort array of objects in ascending and descending order of React app


In this tutorial, You learned how to sort an array of objects by ascending and descending order in React component render component. We have an array of objects data either coming from API or fixed.

For example,

employeeList = [
        {
          name: 'John',
          email: 'john@gmail.com'
        },
        {
          name: 'Ram',
          email: 'ram@gmail.com'
        },
        {
          name: 'Abc',
          email: 'abc@gmail.com'
        }
      ]

Javascript array has a sort function which sorts an default order.

Let’s see how to iterate using Array.map method to in react component.

React class component to Sort ascending and descending

  • Created a react component app.jsx
  • we have array of objects stored in react state object
  • Created two button elements for ascending and descending
  • Created binding functions for ascending and descending

Here is an code for sorting an array of objects in ascending order

  sortByAscending() {
    let sortedAsceding = this.state.data.sort((a, b) => {
      return a.name - b.name;
    });

    this.setState({
      data: sortedAsceding
    });
  }

Here is an code for sorting an array of objects in descending order

  sortByDescending() {

    let sortedDescending = this.state.data.sort((a, b) => {
      return b.name - a.name;
    });
    this.setState({
      data: sortedDescending
    });
  }
  • In render method, Iterated array of objects using map method and construct the result object
  • In render method add this result using javascript expression syntax

import React, { Component } from ‘react’; import { render } from ‘react-dom’;

export default class App extends Component { constructor(props) { super(props); this.state = { data: [ { name: ‘John’, email: ‘john@gmail.com’ }, { name: ‘Ram’, email: ‘ram@gmail.com’ }, { name: ‘Abc’, email: ‘abc@gmail.com’ } ] }; this.sortByAscending = this.sortByAscending.bind(this); this.sortByDescending = this.sortByDescending.bind(this); }

sortByAscending() { let sortedAsceding = this.state.data.sort((a, b) => { return a.name - b.name; });

this.setState({
  data: sortedAsceding
});

}

sortByDescending() {

let sortedDescending = this.state.data.sort((a, b) => {
  return b.name - a.name;
});
this.setState({
  data: sortedDescending
});

}

render() { const emps = this.state.data;

const result = emps.map((emp, index) => <li key={index}>{emp.name}</li>);

return (
  <div>
    <button onClick={this.sortByAscending}>ASC</button>
    <button onClick={this.sortByDescending}>DESC</button>
    <ul>{result}</ul>
  </div>
);

} }


Whenever ascending button is clicked, Names are printed in ascending order
and descending names are displayed on clicking descending button.



## Conclusion

In this tutorial, You learned how to sort an field in array of  objects  by ascending and descendng order in react components

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.





Related posts

Top 6 In operator examples in Javascript|Typescript|Angular

How to populate enum object data in dropdown in angular| Angular material dropdown example

Best Ways to convert timestamp to Date format in typescript| Angular timestamp date example

How to compare dates in Angular | Momentjs example

Different ways to write a comments in Typescript| Angular Component Comment example

Multiple ways to download an file or image from a Javascript?

How to set focus on top page in angular|javascript example