React sort a map function with two fields

Question

I'm a beginner with React and i want to sorting an array by two filters :

{folder.actions
  .sort((a,b) => {
    return a.date_actual - b.date_actual || a.date_sched - b.date_sched
   })
  .map(action => {
   ...

This code doesn't work, i want to sort by descending and mixed two dates type "date_actual" and "date_sched" with map function and not :

...
  <Col xs={4}>
    {action.date_actual ? 
      new Date(action.date_actual).toLocaleDateString() : 
      new Date(action.date_sched).toLocaleDateString()
     }
  </Col>
...
18/04/2021 (date_sched)
03/11/2020 (date_actual)
18/04/2021 (date_sched)
03/11/2020 (date_actual)
03/11/2020 (date_actual)
03/11/2020 (date_actual)
12/04/2021 (date_sched)
03/11/2020 (date_actual)
03/11/2020 (date_actual)

Thanks for your time and your help !

If you have the option of adding other libraries, Lodash is a great library that provides a lot of useful utilities for working with arrays. The sortBy() method is one and would easily do what you need. lodash.com/docs/4.17.15#sortBy — squillman
– squillman, Commented Apr 15, 2021 at 13:55
Your question is unclear. How does your input data look like? And, how would the output look like? — Ajeet Shah
– Ajeet Shah, Commented Apr 15, 2021 at 14:04
@AjeetShah, in input i have an array some entries look like date_actual: (a date), date_sched: null and others date_actual: null, date_sched: (an other date). In output, i want all dates by reverse sorting. — B. Christophe
– B. Christophe, Commented Apr 15, 2021 at 14:08
Instead of adding those details in a comment, please update your question to include those details (e.g. either date_actual has a value or date_sched has a value). — crashmstr
– crashmstr, Commented Apr 15, 2021 at 14:15

Luïs · Accepted Answer · 2021-04-15 14:17:36Z

2

If you wish to sort based on 2 date types at once, you can use the || operator in your sort logic. Let's say for example you have an array like this: (I use a number for simplicities sake)

const yourArray = [
  { first_date: 0 },
  { second_date: 1 },
  { first_date: 3 },
  { second_date: 2 }
];

What we want to achieve is this:

const yourArray = [
  { first_date: 0 },
  { second_date: 1 },
  { second_date: 2 }
  { first_date: 3 },
];

You can tell javascript to use either the first date, of use the second one if that the first one does not exist.

yourArray
  .sort((a, b) => (a.first_date || a.second_date) - (b.first_date || b.second_date));

// const yourArray = [
//   { first_date: 0 },
//   { second_date: 1 },
//   { second_date: 2 }
//   { first_date: 3 },
// ];

edited Apr 15, 2021 at 14:17

answered Apr 15, 2021 at 14:08

Luïs

2,9334 gold badges23 silver badges35 bronze badges

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

2 Comments

crashmstr Over a year ago

The sort logic may be simpler if you make a temp date field, but it is not required (e.g. there is no "have to" here)

Luïs Over a year ago

@crashmstr Indeed, I was looking past the obvious here. Thanks for clarifying this. Appreciate it! I've updated my answer

B. Christophe · Accepted Answer · 2021-04-15 14:45:16Z

1

Thanks for your fast reply,

with this :


{folder.actions
  .sort((a,b) => {
     return (a.date_actual || a.date_sched) - (b.date_actual || b.date_sched)
   })
  .map(action => {
...
return (
 ...
  <Col xs={4}>
   {action.date_actual ? 
     new Date(action.date_actual).toLocaleDateString() : 
     new Date(action.date_sched).toLocaleDateString()}
  </Col>

I have on screen :

in input in array i have :

date_actual: "2020-11-03 17:30:30"
date_sched: null

some entries are inversed, date_actual is empty and date_sched is fully

answered Apr 15, 2021 at 14:45

B. Christophe

891 silver badge9 bronze badges

Comments

Ergun · Accepted Answer · 2021-04-15 14:54:32Z

0

Your sort function will always sort by the first condition, as it will always evaluate to true. If you want sort by both fields, you have to explicitly define those conditions:

e.g. if (a.date1 > b.date2) & (a.date2 > b.date2) return 1 and so on...

answered Apr 15, 2021 at 14:54

Ergun

5303 gold badges9 silver badges24 bronze badges

Collectives™ on Stack Overflow

React sort a map function with two fields

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related