Reactjs stack a schedule in day groups

I am building a scheduling application. I want to stack the schedule in day order. Currently I have the list coming out very raw, but how do I group it per day when rendering the markup.

current raw stack

refactor the list in day order

https://codesandbox.io/s/charming-fast-d9vhdv?file=/src/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import CalendarMonthIcon from '@mui/icons-material/CalendarMonth'
import moment from 'moment'

function App() {
  let rawSchedule = [
    {
      scheduleDate: '2023-09-18T14:00:00.000Z',
      recipient: {
        id: '2',
        fullName: 'Barry Saunders',
      },
    },
    {
      scheduleDate: '2023-09-18T16:00:00.000Z',
      recipient: {
        id: '2',
        fullName: 'Barry Saunders',
      },
    },
    {
      scheduleDate: '2023-09-15T14:00:00.000Z',
      recipient: {
        id: '6',
        fullName: 'Aaron Williams',
      },
    },
  ]

  return (
    <>
      <h5>
        <CalendarMonthIcon /> Calendar
      </h5>
      <ul>
        {rawSchedule?.map((item, i) => {
          return (
            <li key={i}>
              {item.recipient.fullName}{' '}
              {moment(item.scheduleDate).format('DD MMM YYYY HH:mm')}
            </li>
          )
        })}
      </ul>
    </>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

>Solution :

This will help you.

Grouping the schedule:

We use the reduce function to organize the schedule items by their dates. It turns a list of items into a collection of smaller groups based on the dates.
Each group is a collection of schedule items that happen on the same date.

Displaying each group:

Object.keys(groupedSchedule).map() allows us to go through each date group one by one to display them on the screen.
For each date, we list out the schedule items that belong to that date.
Formatting dates and times:

import React from 'react';
import ReactDOM from 'react-dom';
import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
import moment from 'moment';

function App() {
  // Raw schedule data
  let rawSchedule = [
    // ... (your schedule items here)
  ];

  // Group the raw schedule by date
  const groupedSchedule = rawSchedule.reduce((groups, item) => {
    // Format the schedule date to 'YYYY-MM-DD'
    const date = moment(item.scheduleDate).format('YYYY-MM-DD');
    
    // If the date is not already a property on the groups object, add it and set its value to an empty array
    if (!groups[date]) {
      groups[date] = [];
    }

    // Push the current item to the appropriate date group
    groups[date].push(item);

    return groups;
  }, {});

  return (
    <>
      <h5>
        {/* Calendar icon and title */}
        <CalendarMonthIcon /> Calendar
      </h5>

      {/* Iterate over each date group and render its items */}
      {Object.keys(groupedSchedule).map((date, i) => (
        <div key={i}>
          {/* Display the formatted date */}
          <h6>{moment(date).format('DD MMM YYYY')}</h6>
          <ul>
            {/* Iterate over each item in the current date group and render them */}
            {groupedSchedule[date].map((item, j) => (
              <li key={j}>
                {/* Display the recipient's full name and the formatted schedule time */}
                {item.recipient.fullName}{' '}
                {moment(item.scheduleDate).format('HH:mm')}
              </li>
            ))}
          </ul>
        </div>
      ))}
    </>
  );
}

// Render the App component to the root element
ReactDOM.render(<App />, document.getElementById('root'));