Guest User

Untitled

a guest
Oct 19th, 2019
82
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