2-Agregar una Tarea a tu Lista de Tareas en React

 

 Cómo Agregar una Tarea a tu Lista de Tareas en React (Paso a Paso)

En este tutorial te explicaré cómo agregar una nueva tarea a tu lista de tareas usando React y el hook useState. Más adelante podremos ver cómo actualizar y eliminar tareas.

Paso 1: Configuración inicial

Primero, tenemos nuestro componente principal TodoApp con los estados necesarios:

jsx

Copy

Download

import { useState } from "react";
import Todo from "./todo";
import "./todoApp.css";

export default function TodoApp() {
  const [title, setTitle] = useState("");
  const [todos, setTodos] = useState([]);
  const [editItem, setEditItem] = useState(null);

  // ...otros handlers que veremos después
}

Paso 2: Manejar el cambio en el input

Tenemos un input donde escribiremos nuestras tareas. Necesitamos manejar los cambios en este input:

jsx

Copy

Download

function handleInputChange(e) {
  setTitle(e.target.value); // Actualiza el estado 'title' con lo que escribimos
}

Paso 3: Manejar el envío del formulario

Cuando presionamos "Enter" o hacemos clic en el botón, se ejecutará esta función:

jsx

Copy

Download

function handleSubmit(e) {
  e.preventDefault(); // Evita que la página se recargue
  
  // Creamos un nuevo objeto de tarea
  const newTodo = {
    id: Date.now(), // Usamos la fecha actual como ID único
    title: title,   // El texto que escribimos en el input
    completed: false // Por defecto no está completada
  };

  // Copiamos el array existente y agregamos la nueva tarea al principio
  const updatedTodos = [...todos];
  updatedTodos.unshift(newTodo);

  // Actualizamos el estado
  setTodos(updatedTodos);
  setTitle(""); // Limpiamos el input
}

Paso 4: Renderizar el formulario

En el return de nuestro componente, tenemos el formulario para agregar tareas:

jsx

Copy

Download

return (
  <div className="todoContainer">
    <form onSubmit={handleSubmit} className="todoCreateForm">
      <input
        onChange={handleInputChange}
        value={title}
        className="todoInput"
        placeholder="Escribe tu tarea"
      />
      <input 
        value="Crear tarea" 
        type={"submit"} 
        className="buttonCreate" 
      />
    </form>

    {/* Aquí se renderizan las tareas */}
    <div className="todosContainer">
      {todos.map((item) => (
        <Todo
          key={item.id}
          item={item}
          onUpdate={handleUpdate}
          onDelete={handleDelete}
          onComplete={handleCheckboxChange}
        />
      ))}
    </div>
  </div>
);

Cómo funciona el proceso completo:

1. Escribes tu tarea en el input (ej: "Terminar mi libro")

2. Al presionar Enter o hacer clic en "Crear tarea":

   • Se crea un nuevo objeto tarea con un ID único, el título y estado "no completado"

   • Se agrega esta tarea al principio de la lista existente

   • Se limpia el input para que puedas escribir una nueva tarea

3. La lista se actualiza automáticamente mostrando la nueva tarea al inicio

Próximos pasos

En futuros posts veremos cómo:

1. Actualizar una tarea existente (editar el texto)

2. Eliminar una tarea de la lista

3. Marcar tareas como completadas

¡Espero que este tutorial te haya sido útil! Si tienes alguna pregunta sobre cómo agregar tareas, déjala en los comentarios.

Ejemplo de uso:

1. Escribe "Ir al supermercado" en el input

2. Presiona Enter

3. ¡Verás la nueva tarea en tu lista!