Sorting a React map function based on two fields

Question

Sorting a React map function based on two fields

I am new to React and I am trying to sort an array by two different dates:

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

However, the code above is not working as expected. I need the sorting to be in descending order while also considering both "date_actual" and "date_sched" properties within the map function:

...
  <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)

Thank you for your time and assistance!

arrays reactjs sorting map-function

Answer 1

Answer №1

If you want to sort based on two different date types simultaneously, you can utilize the || operator within your sorting logic. For instance, consider an array like this: (I'm using numbers for simplicity)

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

The desired outcome is as follows:

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

In JavaScript, you can specify to use either the first date or the second date if the first one doesn't 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 },
// ];

Answer 2

If you want to sort based on two different date types simultaneously, you can utilize the || operator within your sorting logic. For instance, consider an array like this: (I'm using numbers for simplicity)

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

The desired outcome is as follows:

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

In JavaScript, you can specify to use either the first date or the second date if the first one doesn't 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 },
// ];

Answer 3

Answer №2

Thank you for the prompt response,

Upon reviewing this code snippet:


{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>

The displayed dates are as follows:

In the input array, the dates are:

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

There seems to be some inconsistency in the entries where date_actual is empty while date_sched is filled.

Answer 4

Thank you for the prompt response,

Upon reviewing this code snippet:


{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>

The displayed dates are as follows:

In the input array, the dates are:

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

There seems to be some inconsistency in the entries where date_actual is empty while date_sched is filled.

Answer 5

Answer №3

The sorting algorithm in your function will always prioritize the first condition since it consistently yields true results. To sort by both fields effectively, you must explicitly specify the conditions for each field:

For example: if (a.date1 > b.date2) && (a.date2 > b.date2) return 1 and continue this pattern...

Answer 6

The sorting algorithm in your function will always prioritize the first condition since it consistently yields true results. To sort by both fields effectively, you must explicitly specify the conditions for each field:

For example: if (a.date1 > b.date2) && (a.date2 > b.date2) return 1 and continue this pattern...

Sorting a React map function based on two fields

Answer №1

Answer №2

Answer №3

Similar questions

Reorganizing MongoDB arrays with Prisma and NextJS

What steps can I take to resolve the issue of text/data overflow within material-ui?

Incorporate communication between the front-end and backend

Utilizing Multiple Components on a Single Page in React.js

Tips for successfully passing a function to a link component in React Router v6

The functionality of the React Material-UI menu anchor is disrupted when interacting with a react-window

Leveraging the power of Framer Motion in combination with Typescript

"Date validation issue with Formik and Material-UI's Datepicker component: min and max dates not

Reverting a React-Select child component back to its default values from the parent component

React Hooks: Unable to re-enable input after it has been disabled

Discovering instructions on locating Material UI component documentation

Implementing a timed delay before assigning a class in the state

Error: zone.filter is not a valid function and cannot be handled

Customizing HTML element tags in MUI: Best practices

Dealing with a failed login error in NextAuth.js

Using multiple functions to organize nested variables within the useState hook

Reviewing and Implementing React and Material-UI Autocomplete for Selecting Multiple

The issue of conflicting dependencies arises between [email protected] and @apollo/[email protected]

I never receive back the funds I deposit into Formic

Arrays in Vue Data