How to sort a map by a specific field in es6 / React?

Question

I've got this map that I'd like to sort by "id" value:

{products.map(({ id, headline }) => (
  <Container>
    <Row key={id}>
      <Col>
        <p>id={id}</p>
        <p>headline={headline}</p>
      </Col>
    </Row>
  </Container>
))}

How would I do this?

Possible duplicate of [Sort array of objects by string property value in JavaScript](https://stackoverflow.com/q/1129216/218196) — Felix Kling, Jul 07 '18 at 01:07
Do you know if the `id` of a product is a number or a string? — Tholle, Jul 07 '18 at 01:27

Andria · Accepted Answer · 2021-03-16T16:47:43.003

17

Assuming id is a number you can do products.sort(({id: previousID}, {id: currentID}) => previousID - currentID)

Like so:

JavaScript Code:

{products
   .sort(({ id: previousID }, { id: currentID }) => previousID - currentID)
   .map(({ id, headline }) => (
     <Container key={id}>
       <Row>
         <Col>
           <p>id={id}</p>
           <p>headline={headline}</p>
         </Col>
       </Row>
     </Container>
   ))
}

edited Mar 16 '21 at 16:47

answered Jul 07 '18 at 01:33

Andria

4,712
2
22
38

double check the return of sort – charlietfl Jul 07 '18 at 01:35
Sorry, I forgot to finish typing it. But I put it in the top part, it sorts them from lowest to hightest, I tested that part. – Andria Jul 07 '18 at 01:37
Worked like a charm! – Robbie Jul 07 '18 at 01:39
@ChrisBrownie55 You have a typo in `.sort(({ id: previousID }, { id: currentID }) => previoudID - currentID)` (previoudID should be previousID). – kenold Nov 14 '19 at 16:05

Tholle · Answer 2 · 2018-07-07T01:38:10.243

9

You could sort the array before you map it:

{products.sort((a, b) => a.id - b.id).map(({ id, headline }) => (
  <Container>
    <Row key={id}>
      <Col>
        <p>id={id}</p>
        <p>headline={headline}</p>
      </Col>
    </Row>
  </Container>
))}

edited Jul 07 '18 at 01:38

answered Jul 07 '18 at 01:32

Tholle

108,070
19
198
189

How to sort a map by a specific field in es6 / React?

2 Answers2