SHARE
TWEET

Untitled

a guest Oct 19th, 2019 80 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useState } from 'react';
  2. import uuid from 'uuid/v4';
  3.  
  4. const initialTodos = [
  5.   {
  6.     id: uuid(),
  7.     task: 'Learn React',
  8.     complete: true,
  9.   },
  10.   {
  11.     id: uuid(),
  12.     task: 'Learn Firebase',
  13.     complete: true,
  14.   },
  15.   {
  16.     id: uuid(),
  17.     task: 'Learn GraphQL',
  18.     complete: false,
  19.   },
  20. ];
  21.  
  22. const App = () => {
  23.   const [todos, setTodos] = useState(initialTodos);
  24.   const [task, setTask] = useState('');
  25.  
  26.   const handleChangeInput = event => {
  27.     setTask(event.target.value);
  28.   }
  29.   const handleChangeCheckbox = id => {
  30.     setTodos(
  31.       todos.map(todo => {
  32.         if (todo.id === id) {
  33.           return { ...todo, complete: !todo.complete };
  34.         } else {
  35.           return todo;
  36.         }
  37.       })
  38.     );
  39.   };
  40.  
  41.   const handleSubmit = event => {
  42.     if (task) {
  43.       //add new todo item
  44.       setTodos(todos.concat({ id: uuid(), task, complete: false }));
  45.     }
  46.  
  47.     setTask('');
  48.     event.preventDefault();
  49.   }
  50.  
  51.   return (
  52.     <div>
  53.       <ul>
  54.         {todos.map(todo => (
  55.           <li key={todo.id}>
  56.             <input
  57.                 type="checkbox"
  58.                 checked={todo.complete}
  59.                 onChange={() => handleChangeCheckbox(todo.id)}
  60.               />
  61.             <label>{todo.task}</label>
  62.           </li>
  63.         ))}
  64.       </ul>      
  65.       <form onSubmit={handleSubmit}>
  66.         <input type="text" value={task} onChange={handleChangeInput} />
  67.       </form>      
  68.       {/* {task} */}
  69.     </div>
  70.   );  
  71. }
  72. export default App;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top