<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>
<script type="text/babel">
timestamp: "2022-04-12T19:25:39.950747+00:00",
timestamp: "2022-04-12T19:25:39.950747+00:00",
timestamp: "2022-05-12T19:25:39.950747+00:00",
timestamp: "2022-05-12T19:25:39.950747+00:00",
timestamp: "2023-06-12T19:25:39.950747+00:00",
timestamp: "2023-06-12T19:25:39.950747+00:00",
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);
acc[formattedDate] = [data];
<div className="container">
<h2>React Js Separate array of timestamps into days</h2>
{Object.keys(notesByDay).map((formattedDate) => (
<div key={formattedDate}>
{notesByDay[formattedDate].map((data) => (
<li key={data.timestamp}>{data.name}</li>
ReactDOM.render(<App />, document.getElementById("app"));
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);