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.

1. Importas useTodos y desestructuras addTodo desde stateUpdaters.
2. En el submitEvent recibes el texto del formulario.
3. Llamas a addTodo(newText).
4. 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.