Sort an array of objects in React and render them

Question

I have an array of objects containing some information. I am not able to render them in the order I want and I need some help with that. I render them like this:

this.state.data.map(
    (item, i) => <div key={i}> {item.matchID} {item.timeM} {item.description}</div>
)

Is it possible to sort them ascending with item.timeM in that map()-function or do I have to sort them before i use map?

@Oen44 is right. But know that the logic and functions (map & sort) aren't React-specific, they're normal JS constructs! — gonzofish, Apr 23 '17 at 14:52
if you are grabbing `data` from `backend` it would be nice that this `data` already be `sorted` — Azhar Uddin Sheikh, Nov 22 '22 at 09:14

Mμ. · Accepted Answer · 2020-05-06T10:12:37.233

157

This might be what you're looking for:

// ... rest of code

// copy your state.data to a new array and sort it by itemM in ascending order
// and then map 
const myData = [].concat(this.state.data)
    .sort((a, b) => a.itemM > b.itemM ? 1 : -1)
    .map((item, i) => 
        <div key={i}> {item.matchID} {item.timeM}{item.description}</div>
    );

// render your data here...

The method sort will mutate the original array . Hence I create a new array using the concat method. The sorting on the field itemM should work on sortable entities like string and numbers.

edited May 06 '20 at 10:12

answered Apr 23 '17 at 15:21

Mμ.

8,382
3
26
36

1

I think `.sort((a, b) => a.itemM > b.itemM)` is incorrect here (this really threw me off...). It should be `.sort((a, b) => a.itemM - b.itemM)` if `itemM` are numbers, right? – Bret Royster May 05 '20 at 23:05
4

If `itemM` not numbers it needs to be something more like this: `.sort((a, b) => a.item.timeM > b.item.timeM ? 1:-1)` – Bret Royster May 05 '20 at 23:13
1

great answer. It's also well worth being aware of `.localeCompare()`, for example `b.item.timeM.localeCompare(b.item.timeM)` – ErichBSchulz Sep 21 '21 at 13:22
it's better to use `lodash` for this kind of operation – Azhar Uddin Sheikh Nov 22 '22 at 09:16

score 24 · Answer 2 · answered Apr 23 '17 at 15:45

You will need to sort your object before mapping over them. And it can be done easily with a sort() function with a custom comparator definition like

var obj = [...this.state.data];
obj.sort((a,b) => a.timeM - b.timeM);
obj.map((item, i) => (<div key={i}> {item.matchID}  
                      {item.timeM} {item.description}</div>))

score 18 · Answer 3 · answered Nov 20 '20 at 06:32

18

const list = [
  { qty: 10, size: 'XXL' },
  { qty: 2, size: 'XL' },
  { qty: 8, size: 'M' }
]

list.sort((a, b) => (a.qty > b.qty) ? 1 : -1)

console.log(list)

Out Put :

[
  {
    "qty": 2,
    "size": "XL"
  },
  {
    "qty": 8,
    "size": "M"
  },
  {
    "qty": 10,
    "size": "XXL"
  }
]

answered Nov 20 '20 at 06:32

ANKIT DETROJA

1,948
1
17
24

this has nothing to do with React as asked in the question. – Jamie Dec 01 '21 at 11:57

score 9 · Answer 4 · edited Feb 05 '19 at 14:35

9

this.state.data.sort((a, b) => a.item.timeM > b.item.timeM).map(
    (item, i) => <div key={i}> {item.matchID} {item.timeM} {item.description}</div>
)

edited Feb 05 '19 at 14:35

brooksrelyt

3,925
5
31
54

answered Feb 05 '19 at 14:10

Vincenzo Centofanti

87
1
1

score 8 · Answer 5 · answered Oct 21 '19 at 02:47

8

Try lodash sortBy

import * as _ from "lodash";
_.sortBy(data.applications,"id").map(application => (
    console.log("application")
    )
)

Read more : lodash.sortBy

answered Oct 21 '19 at 02:47

Arun K

868
10
17

score 7 · Answer 6 · edited Oct 12 '21 at 19:50

7

this.state.data.sort((a, b) => a.objKey > b.objKey ? 1:-1).map((objKey, index))

edited Oct 12 '21 at 19:50

Mayur Prajapati

5,454
7
41
70

answered Apr 27 '21 at 12:56

vandana

71
1
1

score 4 · Answer 7 · answered Apr 15 '20 at 21:02

4

Chrome browser considers integer value as return type not boolean value so,

this.state.data.sort((a, b) => a.item.timeM > b.item.timeM ? 1:-1).map(
    (item, i) => <div key={i}> {item.matchID} {item.timeM} {item.description}</div>
)

answered Apr 15 '20 at 21:02

Praveen prav

41
1

score 2 · Answer 8 · answered Nov 22 '22 at 09:07

Use localeCompare for strings. For many alphabets, it's better to use the string.localeCompare method to properly sort letters like Ö.

For example, let's sort several countries in German:

let countries = ['Österreich', 'Andorra', 'Vietnam']
alert( countries.sort( (a, b) => a > b ? 1 : -1) )

In this case result of sorted array will be next: Andorra, Vietnam, Österreich (wrong)

alert( countries.sort( (a, b) => a.localeCompare(b) ) )

On the other hand: Andorra, Österreich, Vietnam (properly)

This is an underrated answer and the correct one. – OutFall Jan 04 '23 at 22:36 — OutFall, Jan 04 '23 at 22:36

score 1 · Answer 9 · answered Sep 02 '22 at 10:11

I found a really good post: React: how to dynamically sort an array of objects

It´s for dropdown, but you can adapt it. The important thing is the way of sorting the array because, as it is explained in the post, react is not realizing about list changes, as the elements are the same.

const [currentList, setCurrentList] = useState(new Array());

const sorted = [...dataList].sort((a, b) => b["lotNumber"] - a["lotNumber"]).reverse();

setCurrentList(sorted);

Atit More · Answer 10 · 2022-03-16T07:45:26.733

This approach worked for me

const list = [
  { price: 10, plan: 'a' },
  { price: 2, plan: 'b' },
  { price: 8, plan: 'c' }
];
this.setState({ planList: list.sort((a,b)=> a.price-b.price)  });


render(){
   return(){
      <div>
          this.state.planList !== undefined && this.state.planList !== null && 
          this.state.planList !== '' && this.state.planList.map((ele, index) => {
              return (
                 <div key={index}> {ele.price}{ele.plan}</div>
              )
          })
      </div>
  }
}

Thank You

Sort an array of objects in React and render them

10 Answers10

Linked

Related