Advertisement
Guest User

Untitled

a guest
Apr 7th, 2020
220
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useState, useEffect } from 'react';
  2. import './App.css';
  3.  
  4. function App() {
  5.   const [todo, setTodo] = useState('');
  6.   const [todos, setTodos] = useState([]);
  7.  
  8.   function handleChangeTodo(event) {
  9.     setTodo(event.target.value);
  10.   }
  11.  
  12.   function handleAddTodo(event) {
  13.     if (event.key == 'Enter' && todo.trim().length > 0) {
  14.       setTodos([
  15.         ...todos,
  16.         { id: Date.now(), completed: false, text: event.target.value },
  17.       ]);
  18.       setTodo('');
  19.     }
  20.   }
  21.  
  22.   function handleEditTodo(id) {
  23.     return function (event) {
  24.       event.stopPropagation();
  25.       // edit todo
  26.     };
  27.   }
  28.  
  29.   function handleToggleTodo(id) {
  30.     setTodos(
  31.       todos.map((todo) =>
  32.         todo.id == id
  33.           ? {
  34.               ...todo,
  35.               completed: !todo.completed,
  36.             }
  37.           : todo
  38.       )
  39.     );
  40.   }
  41.  
  42.   function handleDeleteTodo(id) {
  43.     return function (event) {
  44.       event.stopPropagation();
  45.       setTodos(todos.filter((todo) => todo.id !== id));
  46.     };
  47.   }
  48.  
  49.   const uncompletedTodos = todos.filter((todo) => !todo.completed).length;
  50.  
  51.   return (
  52.     <div className="App">
  53.       <h1>TodoList ({uncompletedTodos})</h1>
  54.       <div>
  55.         <input
  56.           type="text"
  57.           value={todo}
  58.           onChange={handleChangeTodo}
  59.           onKeyPress={handleAddTodo}
  60.         />
  61.       </div>
  62.       <div className="todos">
  63.         {todos.map((todo) => {
  64.           return (
  65.             <div
  66.               onClick={() => handleToggleTodo(todo.id)}
  67.               className={`todo ${todo.completed ? 'completed' : ''}`}
  68.               key={todo.id}
  69.             >
  70.               <span>{todo.text}</span>
  71.               <button onClick={handleEditTodo(todo.id)}>Edit</button>
  72.               <button onClick={handleDeleteTodo(todo.id)}>Delete</button>
  73.             </div>
  74.           );
  75.         })}
  76.       </div>
  77.     </div>
  78.   );
  79. }
  80.  
  81. export default App;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement