Botón de editar todos con React y SVG

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:0012:19

Botón de editar todos con React y SVG

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

Clase 20 de 30

Clase 20 / 30

Recursos

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.

Harold Zurita Simon

Hace 2 años

Botón de editar TODOs

. Dentro de la carpeta src/ui/TodoIcon crearemos un archivo edit.svg de la siguiente manera. .

<svg
  viewBox="0 0 24 24"
  fill="none"
  xmlns=""
>
  <path
    d="M0 18.9993V24H5.00069L19.756 9.24459L14.7553 4.2439L0 18.9993Z" 
  />
  <path
    d="M23.6099 3.5038L20.4961 0.390054C19.9761 -0.130018 19.1293 -0.130018 18.6092 0.390054L16.1689 2.83039L21.1695 7.83108L23.6099 5.39074C24.13 4.87067 24.13 4.02387 23.6099 3.5038Z"
  />
</svg>

. Posteriormente, dentro del archivo index.js en el mismo directorio, vamos a añadir este svg al objeto de iconTypes del componente TodoIcon. .

import React from 'react';
import { ReactComponent as CheckSVG } from './check.svg';
import { ReactComponent as EditSVG } from './edit.svg';
import { ReactComponent as DeleteSVG } from './delete.svg';
import './TodoIcon.css';

const iconTypes = {
  "check": color => (
    <CheckSVG className="Icon-svg Icon-svg--check" fill={color} />
  ),
  "edit": color => (
    <EditSVG className="Icon-svg Icon-svg--edit" fill={color} />
  ),
  "delete": color => (
    <DeleteSVG className="Icon-svg Icon-svg--delete" fill={color} />
  ),
};

function TodoIcon({ type, color = 'gray', onClick }) {
  return (
    <span
      className={`Icon-container Icon-container--${type}`}
      onClick={onClick}
    >
      {iconTypestype}
    </span>
  );
}

export { TodoIcon };

. Creamos un archivo EditIcon.js donde llamamos a TodoIcon pasandole el tipo edit y la función onEdit en onClick como propiedades. .

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

function EditIcon({ onEdit }) {
  return (
    <TodoIcon
      type="edit"
      onClick={onEdit}
    />
  );
}

export { EditIcon };

. En el archivo TodoIcon.css agregamos la clase Icon-container--edit y Icon-container:hover .Icon-svg--edit. .

.Icon-container {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  width: 48px;
  /* background-color: #CCC; */
}
.Icon-container--check {
  position: absolute;
  left: 12px;
}
.Icon-container--edit {
  position: absolute;
  top: -24px;
  right: 48px;
}
.Icon-container--delete {
  position: absolute;
  top: -24px;
  right: 0;
}

.Icon-svg {
  width: 24px;
  height: 24px;
  transition: fill .15s;
}
.Icon-container:hover .Icon-svg--check {
  fill: #4caf50;
}
.Icon-container:hover .Icon-svg--edit {
  fill: #61DAFA;
}
.Icon-container:hover .Icon-svg--delete {
  fill: red;
}

. Finalmente, solo queda renderizar este botón desde el componente TodoItem de la siguiente manera. .

import React from 'react';
import { CompleteIcon } from '../TodoIcon/CompleteIcon';
import { EditIcon } from '../TodoIcon/EditIcon';
import { DeleteIcon } from '../TodoIcon/DeleteIcon';
import './TodoItem.css';

function TodoItem(props) {
  return (
    <li className="TodoItem">
      <CompleteIcon
        completed={props.completed}
        onComplete={props.onComplete}
      />
      <p
        className={`TodoItem-p ${props.completed && 'TodoItem-p--complete'}`}
      >
        {props.text}
      </p>
      <EditIcon
        onEdit={props.onEdit}
      />
      <DeleteIcon
        onDelete={props.onDelete}
      />
    </li>
  );
}

export { TodoItem };

. Por lo que tendremos que añadir la render prop onEdit desde el llamado a TodoItem en el componente HomePage, donde en este caso solo mostrará un mensaje que indica que se editará un TODO. .

function HomePage() {
...
  return (
    ...
        {todo => (
          <TodoItem
            key={todo.text}
            text={todo.text}
            completed={todo.completed}
            onEdit={() => console.log('Editar todo')}
            onComplete={() => completeTodo(todo.text)}
            onDelete={() => deleteTodo(todo.text)}
          />
        )}
...
  );
}

export { HomePage };

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

Botón de editar todos con React y SVG