0-Gestión de estado en una aplicación de tareas

 

useState en React: El Corazón de Nuestra App de Tareas

En este post, vamos a analizar dos líneas fundamentales de código en nuestra aplicación de tareas (Todo App) en React y cómo impactan en toda la funcionalidad de la aplicación:

javascript
Copy
Download
const [title, setTitle] = useState("");
const [todos, setTodos] = useState([]);

¿Qué hace este código?

Estas dos líneas utilizan el hook useState de React para crear dos variables de estado:

  1. title: Almacena el texto de la nueva tarea que el usuario está escribiendo

  2. todos: Almacena el array de todas las tareas creadas

Cada una tiene su función actualizadora correspondiente: setTitle y setTodos.

¿Cómo se utilizan en la aplicación?

1. title y setTitle en acción

Función handleInputChange:

javascript
Copy
Download
function handleInputChange(e) {
  setTitle(e.target.value); // Actualiza title con cada tecla presionada
}

  • Cada vez que escribes en el input, esta función captura el valor y actualiza title

  • El input está conectado a este estado:

    jsx
    Copy
    Download
    <input 
  value={title}
  onChange={handleInputChange}
/>

Función handleSubmit:

javascript
Copy
Download
function handleSubmit(e) {
  e.preventDefault();
  // ...crear nueva tarea...
  setTitle(""); // ¡Limpia el input después de agregar!
}

2. todos y setTodos - El núcleo de nuestra app

Función handleSubmit (crear tarea):

javascript
Copy
Download
const updatedTodos = [...todos];
updatedTodos.unshift(newTodo);
setTodos(updatedTodos); // Actualiza la lista de tareas

Función handleDelete (eliminar tarea):

javascript
Copy
Download
function handleDelete(id) {
  const filteredTodos = todos.filter(item => item.id !== id);
  setTodos([...filteredTodos]); // Actualiza la lista sin el elemento eliminado
}

Función handleUpdate (editar texto):

javascript
Copy
Download
function handleUpdate(id, value) {
  const temp = [...todos];
  const item = temp.find(item => item.id === id);
  item.title = value;
  setTodos([...temp]); // Actualiza la lista con el texto modificado
}

Función handleCheckboxChange (marcar completado):

javascript
Copy
Download
function handleCheckboxChange(id, status) {
  const temp = [...todos];
  const item = temp.find(item => item.id === id);
  item.completed = status;
  setTodos([...temp]); // Actualiza el estado 'completed'
}

¿Por qué es importante este patrón?

  1. Reactividad: Cada vez que usamos setTitle o setTodos, React automáticamente re-renderiza el componente con los nuevos valores

  2. Sincronización UI-Estado: La interfaz siempre refleja el estado actual:

    jsx
    Copy
    Download
    {todos.map(item => <Todo key={item.id} item={item} />)}

  3. Flujo unidireccional: Los datos fluyen en una sola dirección:
    Estado → UI → Eventos → Actualización estado → (ciclo se repite)

Conclusión

Estas dos líneas de código son el cerebro de nuestra aplicación:

  • title y setTitle gestionan la interacción inmediata con el usuario

  • todos y setTodos son la fuente de verdad para todas las operaciones CRUD

El poder de useState está en cómo nos permite gestionar el estado de forma declarativa, manteniendo nuestra UI siempre sincronizada con nuestros datos.

¿Te quedó claro cómo funciona el estado en React? ¡Déjame tus preguntas en los comentarios

Comentarios

Publicar un comentario

Entradas más populares de este blog

1-Sistema de Tareas en React

  Sistema de Tareas en React: Funcionamiento Completo Vamos a desglosar cómo funciona el sistema completo para  agregar y listar tareas  en React, incluyendo los componentes necesarios, los estados y cómo interactúan entre sí. 📌   Componentes Necesarios Nuestra aplicación se compone de: TodoApp  (Componente Principal) Maneja el estado global de las tareas. Contiene el formulario para agregar nuevas tareas. Renderiza la lista de tareas. Todo  (Componente Individual de Tarea) Muestra una tarea específica. Permite editar, eliminar y marcar como completada. ⚡   Estados Clave y su Función Los estados ( useState ) son fundamentales para manejar los datos dinámicos: Estado Tipo Función title string Almacena el texto de la nueva tarea mientras se escribe en el input. todos array Guarda la lista completa de tareas (cada una es un objeto con  id ,  title ,  completed ). editItem  (opcional) null  o  id Controla qué tarea está en mo...
Leer más

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 . v...
Leer más