Cómo funciona editTodo con useParams

Curso de React.js: Navegación con React Router

Contenido del curso

No sé dónde empezar

Fundamentos de navegación en la web

Introducción a React Router DOM 6

Fake authentication con React Router DOM 6

React Router en TODO Machine

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0014:02

Cómo funciona editTodo con useParams

Curso de React.js: Navegación con React Router

Clase 23 de 30

Clase 23 / 30

Recursos

Editar un TODO en React parece simple hasta que descubres que necesitas coordinar tres piezas: un custom hook que maneje la lógica, una ruta dinámica que cargue el identificador correcto y un formulario que devuelva el nuevo texto. Aquí verás cómo conectar esas piezas usando useTodos, useParams y state updaters para que tu aplicación realmente persista los cambios.

Cómo amplío el custom hook useTodos para editar

La lógica de edición vive dentro del custom hook useTodos, junto a funciones como addTodo, completeTodo y deleteTodo. La función editTodo reutiliza el patrón de completeTodo, pero con una diferencia importante: ahora necesitas dos argumentos en lugar de uno.

El primero es el id, que sigue siendo el identificador único del TODO. El segundo es el newText, porque editar implica reemplazar el contenido. Trabajar con id en vez de con el texto te da una ventaja clara: la URL no cambia, el índice no se rompe y la identificación se mantiene estable aunque modifiques el contenido [09:30].

¿Por qué usar id en lugar de texto como identificador? Porque el id es único e inmutable. Si identificas TODOs por su texto, cualquier edición rompería las referencias en URLs, índices y estados.

Cómo retorno editTodo desde el hook

Dentro del objeto stateUpdaters que retorna el hook, agregas editTodo para que cualquier componente que llame a useTodos pueda acceder a esta función. Aprovecha el momento para limpiar lo que ya no usas: si tenías funciones de modales que ningún componente consume, elimínalas sin miedo.

Recibes id y newText como argumentos.
Encuentras el todoIndex con el id.
Creas un nuevo arreglo de TODOs.
Modificas la propiedad text en la posición encontrada.

Este patrón mantiene la inmutabilidad del estado en React, algo clave para que los renders se disparen correctamente.

Cómo obtengo el id del TODO desde la URL con useParams

En la página EditTodoPage, el id no llega como prop ni como estado: viene de la URL. Cuando el usuario hace clic en el lápiz de edición desde el home, navega a una ruta tipo /edit/:id, y ahí es donde entra useParams de React Router DOM [16:45].

js const params = useParams(); const todoId = Number(params.id);

El detalle que muchos pasan por alto: los parámetros de URL siempre llegan como string. Si tu lógica interna compara id numéricos, vas a tener bugs silenciosos. Por eso conviertes el valor con Number(), parseInt() o el operador +.

¿Qué hace useParams en React Router? Devuelve un objeto con los parámetros dinámicos de la ruta actual. Si tu ruta es /edit/:id y la URL es /edit/1, useParams() retorna { id: "1" }.

Cómo conecto el formulario con editTodo

El componente TodoForm ya emite el nuevo texto a través de la prop submitEvent. En EditTodoPage recibes ese valor (puedes llamarlo newText) y lo combinas con el id extraído de la URL para llamar a editTodo(todoId, newText).

La secuencia importa: primero ejecutas la edición y después rediriges al home. Si inviertes el orden, el redirect cancela la actualización antes de que el estado se guarde.

Cómo replico el patrón en NewTodoPage para agregar TODOs

La página de creación sigue la misma estructura, pero más simple. Como addTodo genera el id internamente con la función newTodoId, solo necesitas pasarle el texto que devuelve el formulario.

Importas useTodos y desestructuras addTodo desde stateUpdaters.
En el submitEvent recibes el texto del formulario.
Llamas a addTodo(newText).
Rediriges al home.

Con este cambio, agregar un TODO desde una página dedicada funciona igual que hacerlo desde el modal original, pero ahora con una URL propia y navegación nativa del navegador.

Qué falta pulir en la experiencia de edición

Hay un detalle de UX pendiente: cuando entras a /edit/:id, el textarea aparece vacío. El usuario tiene que reescribir todo desde cero, incluso si solo quería corregir una tilde. Lo lógico sería precargar el texto actual del TODO como valor por defecto del formulario, leyéndolo del estado a partir del id de la URL.

Ese ajuste queda para la siguiente iteración, pero el flujo principal ya funciona: editas un TODO, ves el cambio reflejado en la lista y el id se mantiene estable en todo el proceso.

¿Cómo resolverías tú la precarga del texto en el formulario de edición? Cuéntame en los comentarios qué enfoque usarías.

Harold Zurita Simon

Hace 2 años

Obtener y editar TODOs

. En el componente EditTodoPage vamos a necesitar obtener el id y el nuevo texto que queremos cambiar al TODO. . Para obtener el id utilizamos el react hook useParams, mientras que para obtener el texto pasaremos por propiedad a una función submitEvent a TodoForm, donde este será quien internamente pasará el texto a la función editTodo. . Por cierto, en TodoForm vamos a mover la navegación debajo y después de llamar a props.submitEvent. .

import React from 'react';
import { useParams } from 'react-router-dom';
import { TodoForm } from '../../ui/TodoForm';
import { useTodos } from '../useTodos';

function EditTodoPage() {
  const params = useParams();
  const id = Number(params.id);
  
  const { stateUpdaters } = useTodos();
  const { editTodo } = stateUpdaters;
  
  return (
    <TodoForm
      label="Edita tu TODO"
      submitText="Editar"
      submitEvent={(newText) => editTodo(id, newText)}
    />
  );
}

export { EditTodoPage };

// TodoForm/index.js
const onSubmit = (event) => {
    event.preventDefault();
    props.submitEvent(newTodoValue);
    navigate('/');
  };

. En NewTodoPage se sigue la misma lógica, donde lo único que cambia es la función que se utiliza en submitEvent que en este caso es addTodo y se le pasa solo el texto del nuevo TODO. .

import React from 'react';
import { TodoForm } from '../../ui/TodoForm';
import { useTodos } from '../useTodos';

function NewTodoPage() {
  const { stateUpdaters } = useTodos();
  const { addTodo } = stateUpdaters;
  
  return (
    <TodoForm
      label="Escribe tu nuevo TODO"
      submitText="Añadir"
      submitEvent={(text) => addTodo(text)}
    />
  );
}

export { NewTodoPage };

. Finalmente, el mayor cambio se ve reflejado en useTodos.js, donde eliminamos todo lo relacionado con modales y portales; añadimos una función editTodo que es muy similar a la de completeTodo, solo que en lugar de cambiar completed, modificamos el text del TODO. Por último, retornamos a editTodo dentro del objeto stateUpdaters. .

import React from 'react';
import { useLocalStorage } from './useLocalStorage';

function useTodos() {
	...
  const editTodo = (id, newText) => {
    const todoIndex = todos.findIndex(todo => todo.id === id);
    const newTodos = [...todos];
    newTodos[todoIndex].text = newText;
    saveTodos(newTodos);
  };
  ...
  const stateUpdaters = {
    setSearchValue,
    addTodo,
    completeTodo,
    editTodo,
    deleteTodo,
    sincronizeTodos,
  };

  return { state, stateUpdaters };
}
...

export { useTodos };

Fundamentos de navegación en la web

Cuándo y por qué usar React Router

SSR vs SPA: cómo funciona cada una

Uso de React Router DOM 6 en Proyectos React

Introducción a React Router DOM 6

Instalar React Router Dom 6 paso a paso

Browser Router vs Hash Router en GitHub Pages

Primeras rutas con React Router Dom 6

Link y NavLink para navegación en React

Rutas dinámicas con React Router DOM y useParams

useNavigate para navegar con JavaScript

Outlet y rutas anidadas en React Router

Fake authentication con React Router DOM 6

Rutas privadas con fake auth en React

Rutas privadas y públicas en React

Rutas protegidas con Navigate en React

Roles y permisos en aplicaciones web: Autenticación y autorización

Retos avanzados en React: manejo de estado y composición de componentes

Redirect al login con useLocation en React

Rutas dinámicas con roles de usuario

React Router en TODO Machine

Cómo migrar React portals a rutas reales

Estructura de carpetas con React Router Dom 6

Botón de editar todos con React y SVG

Generación de IDs únicos para gestionar tareas en React

Migrar modales a rutas con useNavigate

Cómo funciona editTodo con useParams

Texto por defecto en textarea con useLocation

Implementación de React Router en Proyectos Legacy

Próximos pasos

Sincronizar el buscador con la URL

Migrando a React Router Dom 5 en proyectos reales

Migra Platzi Movies de JS a React

Clonar React Router desde cero

Navegación Avanzada con React Router DOM 6

Cómo funciona editTodo con useParams