React Js Sort Array of Object by Date Time

<!DOCTYPE html>
<html>

</head>

<body>
  <div id="app"></div>
  <script type="text/babel">
    const { useRef } = React;

function App() {
      // Sample data with datetime strings and additional properties
      const data = [
        { id: 1, datetime: '2023-08-18 08:00:00', name: 'Andrew', location: 'London' },
        { id: 2, datetime: '2023-08-18 07:30:00', name: 'Smith', location: 'New york' },
        { id: 3, datetime: '2023-08-18 09:15:00', name: 'Emma', location: 'Los Angeles' },
        { id: 4, datetime: '2023-08-18 10:45:00', name: 'John', location: 'San Francisco' },
        { id: 5, datetime: '2023-08-18 11:30:00', name: 'Sophia', location: 'Chicago' },
        { id: 6, datetime: '2023-08-18 12:20:00', name: 'Michael', location: 'Miami' },
        { id: 7, datetime: '2023-08-18 14:00:00', name: 'Olivia', location: 'Toronto' },
        { id: 8, datetime: '2023-08-18 15:45:00', name: 'William', location: 'Seattle' },
        { id: 9, datetime: '2023-08-18 16:30:00', name: 'Ava', location: 'Houston' },
        { id: 10, datetime: '2023-08-18 17:15:00', name: 'James', location: 'Boston' }
      ]

// Define your custom comparator function to sort by datetime
      function compareDates(a, b) {
        const dateA = new Date(a.datetime);
        const dateB = new Date(b.datetime);

if (dateA < dateB) {
          return -1;
        }
        if (dateA > dateB) {
          return 1;
        }
        return 0;
      }

// Sort the array using the comparator function
      data.sort(compareDates);

return (
        <div className='container '>
          <h3>React Js Sorted Data by Datetime</h3>
          <ul>
            {data.map(item => (
              <li key={item.id}>
                <strong>Name:</strong> {item.name}<br />
                <strong>Datetime:</strong> {item.datetime}<br />
                <strong>Location:</strong> {item.location}
              </li>
            ))}
          </ul>
        </div>
      );
    }

ReactDOM.render(<App />, document.getElementById('app'));
  </script>
  <style>
    .container {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      background-color: #f5f5f5;
      border-radius: 5px;
    }

.container h3 {
      font-size: 24px;
      color: #333;
      margin-bottom: 20px;
    }

.container ul {
      list-style: none;
      padding: 0;
    }

.container li {
      background-color: #fff;
      margin-bottom: 10px;
      padding: 15px;
      border: 1px solid #ddd;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      
    }

.container li strong {
      font-weight: bold;
      color: #333;
    }

.container li strong::after {
      content: ":";
      margin-right: 5px;
    }

.container li br {
      display: none;
    }

.container li strong+br {
      display: inline;
    }

.container li:last-child {
      margin-bottom: 0;
    }
  </style>
</body>

</html>

 
<!DOCTYPE html>
<html>
​
<head>
  <meta charset="UTF-8" />
  <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 { useRef } = React;
​
    function App() {
      // Sample data with datetime strings and additional properties
      const data = [
        { id: 1, datetime: '2023-08-18 08:00:00', name: 'Andrew', location: 'London' },
        { id: 2, datetime: '2023-08-18 07:30:00', name: 'Smith', location: 'New york' },
        { id: 3, datetime: '2023-08-18 09:15:00', name: 'Emma', location: 'Los Angeles' },
        { id: 4, datetime: '2023-08-18 10:45:00', name: 'John', location: 'San Francisco' },
        { id: 5, datetime: '2023-08-18 11:30:00', name: 'Sophia', location: 'Chicago' },
        { id: 6, datetime: '2023-08-18 12:20:00', name: 'Michael', location: 'Miami' },
        { id: 7, datetime: '2023-08-18 14:00:00', name: 'Olivia', location: 'Toronto' },
        { id: 8, datetime: '2023-08-18 15:45:00', name: 'William', location: 'Seattle' },
        { id: 9, datetime: '2023-08-18 16:30:00', name: 'Ava', location: 'Houston' },
        { id: 10, datetime: '2023-08-18 17:15:00', name: 'James', location: 'Boston' }
      ]
​
​
      // Define your custom comparator function to sort by datetime
      function compareDates(a, b) {
        const dateA = new Date(a.datetime);
        const dateB = new Date(b.datetime);
​
        if (dateA < dateB) {
          return -1;
        }
        if (dateA > dateB) {
          return 1;
        }
        return 0;
      }
​
      // Sort the array using the comparator function
      data.sort(compareDates);
​
      return (
        <div className='container '>
          <h3>React Js Sorted Data by Datetime</h3>
          <ul>
            {data.map(item => (
              <li key={item.id}>
                <strong>Name:</strong> {item.name}<br />
                <strong>Datetime:</strong> {item.datetime}<br />
                <strong>Location:</strong> {item.location}
              </li>
            ))}
          </ul>
        </div>
      );
    }
​
    ReactDOM.render(<App />, document.getElementById('app'));
  </script>
  <style>
    .container {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      background-color: #f5f5f5;
      border-radius: 5px;
    }
​
    .container h3 {
      font-size: 24px;
      color: #333;
      margin-bottom: 20px;
    }
​
    .container ul {
      list-style: none;
      padding: 0;
    }
​
    .container li {
      background-color: #fff;
      margin-bottom: 10px;
      padding: 15px;
      border: 1px solid #ddd;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      
    }
​
    .container li strong {
      font-weight: bold;
      color: #333;
    }
​
    .container li strong::after {
      content: ":";
      margin-right: 5px;
    }
​
    .container li br {
      display: none;
    }
​
    .container li strong+br {
      display: inline;
    }
​
    .container li:last-child {
      margin-bottom: 0;
    }
  </style>
</body>
​
</html>