4-Eliminar una Tarea en React

 

Eliminar una Tarea en React: Guía Paso a Paso

En este post, vamos a implementar la funcionalidad para eliminar tareas en nuestra aplicación de lista de tareas (To-Do) en React. Integraremos esta función con el código existente y explicaremos cada parte del proceso.

---

📌 Código Completo (Integrado con Eliminación)

jsx

Copy

Download

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

export default function TodoApp() {
  // Estados
  const [title, setTitle] = useState("");
  const [todos, setTodos] = useState([]);

  // Función para manejar cambios en el input
  function handleInputChange(e) {
    setTitle(e.target.value);
  }

  // Función para agregar una nueva tarea
  function handleSubmit(e) {
    e.preventDefault();
    const newTodo = {
      id: Date.now(),
      title: title,
      completed: false,
    };
    setTodos([newTodo, ...todos]);
    setTitle("");
  }

  // Función para eliminar una tarea
  function handleDelete(id) {
    const filteredTodos = 

    todos.filter((item) => 

    item.id !== id);
    setTodos(filteredTodos);
  }

  return (
    <div className="todoContainer">
      {/* Formulario para agregar tareas */}
      <form onSubmit={handleSubmit} className="todoCreateForm">
        <input
          onChange={handleInputChange}
          value={title}
          className="todoInput"
          placeholder="Escribe una nueva tarea"
        />
        <input type="submit" value="Crear tarea" className="buttonCreate" />
      </form>

      {/* Lista de tareas */}
      <div className="todosContainer">
        {todos.map((item) => (
          <Todo
            key={item.id}
            item={item}

          // Pasamos la función de eliminación

            onDelete={() => handleDelete(item.id)}
          />
        ))}
      </div>
    </div>
  );
}

---

🔧 Explicación Paso a Paso

1. Estado Inicial (todos)

• todos es un array que almacena todas las tareas.

• Cada tarea es un objeto con:

  • id (único, generado con Date.now()).

  • title (texto de la tarea).

  • completed (booleano para tareas completadas).

2. Función handleDelete(id)

Esta función recibe un id y filtra el array todos para eliminar la tarea correspondiente.

js

Copy

Download

function handleDelete(id) {
  const filteredTodos = todos.filter((item) => item.id !== id);
  setTodos(filteredTodos);
}

📌 ¿Qué hace todos.filter()?

• Crea un nuevo array excluyendo la tarea con el id proporcionado.

• item.id !== id compara cada tarea y mantiene solo las que no coincidan con el id a eliminar.

📌 ¿Por qué setTodos(filteredTodos)?

• Actualiza el estado todos con el nuevo array (sin la tarea eliminada).

• React re-renderiza automáticamente la lista.

---

3. Pasando handleDelete al Componente <Todo>

El componente TodoApp envía la función onDelete como prop a cada <Todo>:

jsx

Copy

Download

<Todo
  key={item.id}
  item={item}
  onDelete={() => handleDelete(item.id)} // Función para eliminar
/>

📌 ¿Por qué () => handleDelete(item.id)?

• Se pasa una función anónima que llama a handleDelete con el id correcto.

• Esto evita que la función se ejecute inmediatamente al renderizar.

---

4. Implementación en el Componente <Todo>

Dentro de Todo.js, añadimos un botón que ejecuta onDelete:

jsx

Copy

Download

export default function Todo({ item, onDelete }) {
  return (
    <div className="todo">
      <span>{item.title}</span>
      <button onClick={onDelete}>Eliminar</button>
    </div>
  );
}

📌 Flujo de Eliminación:

1. El usuario hace clic en "Eliminar" en una tarea.

2. Se ejecuta onDelete (que es handleDelete con el id correcto).

3. handleDelete filtra todos y actualiza el estado.

4. React re-renderiza la lista sin la tarea eliminada.

---

🎯 Diagrama de Flujo

text

Copy

Download

1. Botón "Eliminar" en `<Todo>` → Ejecuta `onDelete`
2. `onDelete` llama a `handleDelete(id)` en `TodoApp`
3. `handleDelete` filtra `todos` y actualiza el estado
4. React re-renderiza la lista sin la tarea eliminada

---

💡 Mejoras Opcionales

1. Confirmación antes de eliminar:
   Usar window.confirm para evitar eliminaciones accidentales:

   js

   Copy

   Download

   function handleDelete(id) {
     if (window.confirm("¿Eliminar esta tarea?")) {
       setTodos(todos.filter((item) => item.id !== id));
     }
   }

2. Animación al eliminar:
   Usar librerías como Framer Motion para animar la salida de la tarea.

3. Recuperación de tareas eliminadas:
   Implementar un sistema de "papelera" con otro estado (deletedTodos).

---

🚀 Conclusión

• La eliminación se maneja filtrando el array todos.

• React actualiza la UI automáticamente al cambiar el estado.

• Pasamos la función onDelete como prop para comunicar componentes.

En el próximo post, implementaremos la edición de tareas. ¡Espero que este tutorial te haya sido útil! 

Recuerda el componente Todo solo notifica al componente TodoApp de que cedió click al botón eliminar y para que el componente TodoApp realice la accion, mejor explicado:

Entendiendo la Comunicación entre Componentes en React: La Función handleDelete

¡Hola comunidad de desarrolladores! 👋 Hoy exploraremos un patrón fundamental en React: cómo los componentes se comunican entre sí, usando como ejemplo la función handleDelete en una aplicación de tareas (Todo App). Veremos por qué esta función se define en el componente padre (TodoApp) pero se ejecuta en el hijo (Todo).

---

🔍 El Código Clave: handleDelete

javascript

Copy

Download

// En TodoApp.js
function handleDelete(id) {
  const filteredTodos = todos.filter(item => item.id !== id);
  setTodos(filteredTodos);
}

Esta función hace dos cosas:

1. Filtra las tareas: Crea un nuevo array (filteredTodos) excluyendo la tarea con el id recibido.

2. Actualiza el estado: Usa setTodos para reemplazar el estado todos con la nueva lista filtrada.

---

❓ La Gran Pregunta: ¿Por qué Pasar Esta Función al Componente Todo?

En tu código, TodoApp pasa handleDelete como prop al componente Todo:

jsx

Copy

Download

<Todo 
  key={item.id}
  item={item}
  onDelete={handleDelete} // ¡Se pasa la función aquí!
/>

Razones clave:

1. El estado vive en TodoApp
   El estado todos es creado y gestionado únicamente por TodoApp mediante useState. En React, solo el componente que posee el estado puede modificarlo. Si intentáramos modificar todos directamente desde Todo, romperíamos el flujo de datos unidireccional.

2. El componente Todo es "dumb" (presentacional)
   Su rol es mostrar datos y capturar interacciones del usuario (clics, cambios, etc.), pero no debe contener lógica de estado. Al recibir onDelete como prop, puede notificar al componente padre cuando ocurre una acción ("¡el usuario quiere borrar esta tarea!").

3. Flujo de datos en React: Padre → Hijo

• Padre (TodoApp): Define cómo se manejan los datos.

• Hijo (Todo): Dispara acciones usando las funciones recibidas por props.

🛠️ ¿Cómo Funciona en la Práctica?

1. En Todo (hijo):
   Cuando el usuario hace clic en "Delete":

   jsx

   Copy

   Download

   <button onClick={() => onDelete(item.id)}>Delete</button>

   Se ejecuta onDelete (que es la función handleDelete de TodoApp) pasando el id de la tarea.

2. En TodoApp (padre):
   Recibe el id, filtra las tareas, y actualiza su estado con setTodos. Esto provoca un re-render de TodoApp y sus hijos, mostrando la lista actualizada.

---

💡 ¿Por qué no hacer todo en TodoApp?

Podrías pensar: "Si TodoApp tiene todo el estado, ¿para qué pasar funciones a Todo?". La respuesta es arquitectura escalable:

• Separación de responsabilidades: Todo se encarga de la UI, TodoApp de la lógica.

• Reutilización: Puedes usar Todo en otros componentes con diferentes funciones de eliminación.

• Mantenimiento: El código es más fácil de depurar (la lógica está centralizada en TodoApp).

---

✨ Conclusión

El patrón usado en handleDelete ejemplifica uno de los principios más importantes de React:

"Lifting State Up" + "Unidirectional Data Flow".

• Estado y lógica: En el componente padre (TodoApp).

• Interacción y UI: En el componente hijo (Todo).

• Comunicación: El hijo ejecuta funciones recibidas por props para notificar al padre.

¡Este flujo garantiza que tu aplicación sea predecible, mantenible y escalable! 🚀

---

¿Te ha quedado claro cómo se comunican los componentes? ¡Déjame tus dudas en los comentarios! 👇

#React #JavaScript #Frontend #PatronesDeDiseño