screen_rotation
Copied to Clipboard
<!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>