React Js Separate array of timestamps into days

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
  </head>

<body>
    <div id="app"></div>
    <script type="text/babel">
      const testData = [
        {
          timestamp: "2022-04-12T19:25:39.950747+00:00",
          name: "note 1",
        },
        {
          timestamp: "2022-04-12T19:25:39.950747+00:00",
          name: "note 2",
        },
        {
          timestamp: "2022-05-12T19:25:39.950747+00:00",
          name: "note 3",
        },
        {
          timestamp: "2022-05-12T19:25:39.950747+00:00",
          name: "note 4",
        },
        {
          timestamp: "2023-06-12T19:25:39.950747+00:00",
          name: "note 5",
        },
        {
          timestamp: "2023-06-12T19:25:39.950747+00:00",
          name: "note 7",
        },
      ];

const App = () => {
        const days = [
          "Sunday",
          "Monday",
          "Tuesday",
          "Wednesday",
          "Thursday",
          "Friday",
          "Saturday",
        ];

const notesByDay = testData.reduce((acc, data) => {
          const formattedDate = formatDateString(data.timestamp);

if (acc[formattedDate]) {
            acc[formattedDate].push(data);
          } else {
            acc[formattedDate] = [data];
          }

return acc;
        }, {});

return (
          <div className="container">
            <h2>React Js Separate array of timestamps into days</h2>
            {Object.keys(notesByDay).map((formattedDate) => (
              <div key={formattedDate}>
                <h2>{formattedDate}</h2>
                <ul>
                  {notesByDay[formattedDate].map((data) => (
                    <li key={data.timestamp}>{data.name}</li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        );
      };

ReactDOM.render(<App />, document.getElementById("app"));
    </script>
    <style>
      .container {
        max-width: 500px;
        margin: 0 auto;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      h2 {
        color: #333;
        font-size: 20px;
        margin-bottom: 10px;
      }

ul {
        list-style-type: none;
        padding: 0;
      }

li {
        margin-bottom: 5px;
      }
    </style>
  </body>
</html>

 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
​
  <body>
    <div id="app"></div>
    <script type="text/babel">
      const testData = [
        {
          timestamp: "2022-04-12T19:25:39.950747+00:00",
          name: "note 1",
        },
        {
          timestamp: "2022-04-12T19:25:39.950747+00:00",
          name: "note 2",
        },
        {
          timestamp: "2022-05-12T19:25:39.950747+00:00",
          name: "note 3",
        },
        {
          timestamp: "2022-05-12T19:25:39.950747+00:00",
          name: "note 4",
        },
        {
          timestamp: "2023-06-12T19:25:39.950747+00:00",
          name: "note 5",
        },
        {
          timestamp: "2023-06-12T19:25:39.950747+00:00",
          name: "note 7",
        },
      ];
​
      const App = () => {
        const days = [
          "Sunday",
          "Monday",
          "Tuesday",
          "Wednesday",
          "Thursday",
          "Friday",
          "Saturday",
        ];
​
        const formatDateString = (dateString) => {
          const date = new Date(dateString);
          const timeZoneOffset = date.getTimezoneOffset() * 60000; // Convert minutes to milliseconds
          const correctedDate = new Date(date.getTime() + timeZoneOffset); // Adjust for time zone offset
          const day = days[correctedDate.getDay()];
          const formattedDate = correctedDate.toLocaleDateString("en-GB"); // Format as "dd/mm/yyyy"
          return `${day} ${formattedDate}`;
        };
​
        const notesByDay = testData.reduce((acc, data) => {
          const formattedDate = formatDateString(data.timestamp);
​
          if (acc[formattedDate]) {
            acc[formattedDate].push(data);
          } else {
            acc[formattedDate] = [data];
          }
​
          return acc;
        }, {});
​
        return (
          <div className="container">
            <h2>React Js Separate array of timestamps into days</h2>
            {Object.keys(notesByDay).map((formattedDate) => (
              <div key={formattedDate}>
                <h2>{formattedDate}</h2>
                <ul>
                  {notesByDay[formattedDate].map((data) => (
                    <li key={data.timestamp}>{data.name}</li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        );
      };
​
      ReactDOM.render(<App />, document.getElementById("app"));
    </script>
    <style>
      .container {
        max-width: 500px;
        margin: 0 auto;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      h2 {
        color: #333;
        font-size: 20px;
        margin-bottom: 10px;
      }
​
      ul {
        list-style-type: none;
        padding: 0;
      }
​
      li {
        margin-bottom: 5px;
      }
    </style>
  </body>
</html>
​