const ToDo = props => ( <tr> <td> <label>{props.id}</label> </td> <td> <input /> </td> <td> <label>{props.createdAt.toTimeString()}</label> </td> </tr> ); class ToDoList extends React.Component { constructor() { super(); const date = new Date(); const toDoCounter = 1; this.state = { list: [ { id: toDoCounter, createdAt: date, }, ], toDoCounter: toDoCounter, }; } sortByEarliest() { const sortedList = this.state.list.sort((a, b) => { return a.createdAt - b.createdAt; }); this.setState({ list: [...sortedList], }); } sortByLatest() { const sortedList = this.state.list.sort((a, b) => { return b.createdAt - a.createdAt; }); this.setState({ list: [...sortedList], }); } addToEnd() { const date = new Date(); const nextId = this.state.toDoCounter + 1; const newList = [ ...this.state.list, {id: nextId, createdAt: date}, ]; this.setState({ list: newList, toDoCounter: nextId, }); } addToStart() { const date = new Date(); const nextId = this.state.toDoCounter + 1; const newList = [ {id: nextId, createdAt: date}, ...this.state.list, ]; this.setState({ list: newList, toDoCounter: nextId, }); } render() { return ( <div> <code>key=id</code> <br /> <button onClick={this.addToStart.bind(this)}> Add New to Start </button> <button onClick={this.addToEnd.bind(this)}> Add New to End </button> <button onClick={this.sortByEarliest.bind(this)}> Sort by Earliest </button> <button onClick={this.sortByLatest.bind(this)}> Sort by Latest </button> <table> <tr> <th>ID</th> <th /> <th>created at</th> </tr> {this.state.list.map((todo, index) => ( <ToDo key={todo.id} {...todo} /> ))} </table> </div> ); } } ReactDOM.render( <ToDoList />, document.getElementById('root') );