hooks-todo.jsx

import React, { useState } from "react";

function App() {
  const [todos, updateTodos] = useState([]);
  const [currentTodo, updateTodo] = useState("");

  return (
    <div className="App">
      <h3>Todos</h3>

      {todos.map(({ todo, ts }) => (
        <li key={ts}>
          {todo}
          <button
            onClick={() =>
              updateTodos(todos.filter(({ ts: todoTs }) => todoTs !== ts))
            }
          >
            X
          </button>
        </li>
      ))}
      <input
        type="text"
        value={currentTodo}
        placeholder="Enter a todo..."
        onChange={e => updateTodo(e.target.value)}
        onKeyPress={e => {
          if (e.key === "Enter" && currentTodo) {
            updateTodos([...todos, { todo: currentTodo, ts: Date.now() }]);
            updateTodo("");
          }
        }}
      />
    </div>
  );
}

export default App;