Agregar un botón de editar a una lista de tareas en React parece simple, pero implica entender cómo se conectan componentes, props e iconos SVG. Aquí aprendes a maquetar el botón de editar todos paso a paso, reutilizando la arquitectura de un proyecto tipo Todo Machine y respetando la separación de responsabilidades por rutas.

Cómo conectar el botón de editar con el componente TodoItem

La lista de tareas vive dentro del componente home, donde cada TodoItem se renderiza con sus props correspondientes. Hasta ahora, ese componente recibía dos funciones: onComplete y onDelete. Para sumar la edición, necesitas una tercera prop llamada onEdit [02:15].

Esa prop viaja desde home hacia el TodoItem, y desde ahí hacia un nuevo icono que dispara la acción al hacer clic. La idea es mantener la misma lógica que ya usabas con el botón de eliminar, pero adaptada para edición.

¿Qué hace la prop onEdit en un TodoItem? Es la función que se ejecuta cuando el usuario hace clic en el icono de editar. Se pasa desde el componente padre hacia el hijo para definir qué ocurre al activar la edición.

Por qué separar el icono en su propio componente

Dentro de la carpeta UI tienes un componente TodoIcon que funciona como puente entre React y los archivos SVG. Ese componente principal usa un objeto iconTypes que decide qué SVG mostrar según el type que recibe como prop [04:30].

Los componentes CompleteIcon y DeleteIcon son atajos: llaman a TodoIcon y le envían el tipo, color y propiedades necesarias. La estrategia es replicar ese patrón para crear un EditIcon.

Cómo crear el componente EditIcon paso a paso

El proceso parte de duplicar la estructura de CompleteIcon y ajustarla. Estas son las modificaciones necesarias:

• Renombrar el componente a EditIcon y cambiar el título interno.
• Eliminar la prop completed, porque un todo editado no necesita cambiar de color.
• Reemplazar onComplete por onEdit para manejar el clic.
• Quitar la prop de color, ya que el icono usará un gris por defecto.
• Cambiar el type enviado a TodoIcon de check a edit.

Después de eso, el componente TodoIcon debe reconocer el nuevo tipo. Eso se hace agregando una entrada al objeto iconTypes que importe el archivo edit.svg y le aplique la clase icon-svg--edit [06:50].

Dónde conseguir el SVG y cómo integrarlo

En proyectos reales, el equipo de diseño entrega los SVG. En proyectos personales puedes descargar uno desde Flaticon o cualquier banco de iconos. Una vez tengas el archivo edit.svg, lo arrastras a la carpeta de iconos del proyecto.

Gracias a la configuración por defecto de Create React App, importar un SVG con la sintaxis import { ReactComponent as Edit } from './edit.svg' te da un componente React listo para renderizar.

Cómo posicionar el icono de editar con CSS

Al renderizar el nuevo icono, aparece mal ubicado encima de los otros botones. Para corregirlo, necesitas dar estilos específicos a la clase icon-svg--edit dentro del archivo TodoIcon.css.

La lógica de posicionamiento se basa en el ancho del icono de eliminar:

• position: absolute para sacarlo del flujo normal.
• top: 24px para alinearlo verticalmente con DeleteIcon.
• right: 48px para correrlo una posición a la izquierda del icono de eliminar.

El número 48 no es arbitrario: como los iconos miden 24 píxeles de ancho, multiplicar por dos garantiza que el icono de editar quede exactamente al lado del de eliminar sin sobreponerse [10:20].

¿Por qué usar 48 píxeles de margen derecho? Porque cada icono mide 24 píxeles y necesitas correr el botón de editar una posición completa hacia la izquierda para que no se solape con el icono de eliminar.

Cómo dar feedback visual con hover

Un detalle importante de UX es indicar que el botón se puede clicar. Para lograrlo, agregas un selector :hover sobre icon-svg--edit que cambia el color a un azul similar al de React, tomado del archivo createTodoButton.css.

Un error común aparece cuando la clase no se aplica: revisa que el nombre esté en minúsculas dentro del JSX, porque si escribes Edit con mayúscula, el CSS no engancha el selector.

Cómo verificar que el botón funciona antes de la lógica

Antes de implementar la edición real, basta con un console.log para confirmar que la prop onEdit viaja correctamente desde home hasta el icono. Le envías una función simple que imprima Editar todo y, al hacer clic, deberías ver ese mensaje en consola.

Este paso valida tres cosas: que el componente EditIcon recibe la prop, que TodoItem la propaga bien, y que el evento onClick está conectado al SVG.

¿Cómo pruebas que una prop llega bien en React? Pasa una función con un console.log desde el componente padre y verifica en la consola del navegador que se imprime al ejecutar la acción.

El siguiente reto es resolver un error heredado del Todo Machine: dejar de usar el texto del todo como identificador en la URL y crear un generador de IDs únicos. ¿Ya pensaste cómo lo implementarías tú? Cuéntalo en los comentarios.