Use of useEffect

Author: danielmlozano

src/App.jsx

@@ -1,11 +1,10 @@
 import "./App.css"
-import Formulario from "./components/Formulario"
+import TodoList from "./components/TodoList"
 
 function App() {
 	return (
 		<div>
-			<h1>Formulario de nombre</h1>
-			<Formulario />
+			<TodoList />
 		</div>
 	)
 }

src/components/Formulario.jsx

@@ -0,0 +1,73 @@
+import { useState, useEffect } from "react"
+
+const TodoList = () => {
+	const [todos, setTodos] = useState([])
+
+	const [newTodo, setNewTodo] = useState("")
+
+	const handleInputChange = (e) => {
+		setNewTodo(e.target.value)
+	}
+
+	useEffect(() => {
+		const savedTodos = JSON.parse(localStorage.getItem("todos")) || []
+		setTodos(savedTodos)
+	}, [])
+
+	useEffect(() => {
+		document.title = `Mis Tareas (${todos.length})`
+	}, [todos])
+
+	useEffect(() => {
+		const handleEnter = (e) => {
+			if (e.key !== "Enter") {
+				return
+			}
+			handleAddTodo()
+		}
+
+		window.addEventListener("keydown", handleEnter)
+
+		return () => window.removeEventListener("keydown", handleEnter)
+	}, [todos, newTodo])
+
+	const handleAddTodo = () => {
+		const newTodoItem = {
+			text: newTodo,
+			completed: false,
+		}
+
+		const newTodos = [...todos, newTodoItem]
+
+		setTodos(newTodos)
+
+		addToLocalStorage(newTodos)
+
+		setNewTodo("")
+	}
+
+	const addToLocalStorage = (arrTodos) => {
+		localStorage.setItem("todos", JSON.stringify(arrTodos))
+	}
+
+	return (
+		<div>
+			<input
+				type="text"
+				placeholder="Nueva tarea"
+				value={newTodo}
+				onChange={handleInputChange}
+			/>
+
+			<button onClick={handleAddTodo}>Agregar</button>
+
+			<ul>
+				{todos.map((todo, index) => (
+					<li key={index}>{todo.text}</li>
+				))}
+			</ul>
+		</div>
+	)
+}
+
+export default TodoList