Texto por defecto en textarea con useLocation

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:0021:54

Texto por defecto en textarea con useLocation

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

Clase 24 de 30

Clase 24 / 30

Recursos

Mejorar la user experience en una aplicación React no siempre significa rediseñar interfaces: a veces basta con que un textarea muestre el texto correcto al editar. Aquí aprenderás a usar useLocation de React Router DOM v6 junto con custom hooks para resolver estados de carga y transmitir información entre rutas en tu todo app.

¿Por qué el textarea aparece vacío al editar un todo?

Cuando un usuario hace clic en el botón de editar, navega a la ruta /edit/:id, pero el textarea aparece vacío. Eso obliga a reescribir todo el contenido desde cero, una experiencia frustrante que rompe la confianza en la app [01:00].

La solución empieza por enviar un valor por defecto al TodoForm desde EditTodoPage. Esa propiedad puede llamarse defaultTodoText y debe contener el texto del todo que el usuario quiere modificar.

¿Qué es defaultTodoText? Es una prop que recibe el componente TodoForm con el texto inicial que aparecerá en el textarea al editar un todo.

¿Cómo crear una función getTodo dentro de un custom hook?

La lógica de buscar un todo específico debe vivir dentro del custom hook useTodos, no dispersa en los componentes. Así mantienes la separación de responsabilidades y reutilizas el comportamiento desde cualquier ruta [02:30].

La función getTodo recibe un id como argumento y retorna el todo que coincida usando todoIndex. A diferencia de addTodo, editTodo o deleteTodo, esta función no modifica el estado: solo lo lee. Por eso se expone desde state y no desde stateUpdaters, aunque técnicamente sea una función.

¿Dónde ubicar funciones que leen pero no modifican el estado?

Es una decisión de diseño interesante. stateUpdaters agrupa actualizadores; state agrupa valores. Una función de lectura encaja mejor en state porque expone información derivada, no acciones que cambien la realidad.

¿Por qué getTodo retorna undefined al cargar la página?

Después de implementar getTodo, aparece un error: Cannot read properties of undefined (reading 'text'). La causa está en useLocalStorage, que simula comportamiento asíncrono con un setTimeout de tres segundos [06:45].

El initialValue arranca como un array vacío. Mientras useLocalStorage no termine de cargar, getTodo busca dentro de una lista sin elementos y retorna undefined. La solución pasa por respetar el estado loading que ya retorna el custom hook.

¿Qué hace useLocalStorage en este caso? Simula una llamada a una API real, retornando un estado loading mientras los datos se hidratan desde el almacenamiento local con un retraso artificial.

¿Cómo manejar el estado loading antes de renderizar?

En EditTodoPage se evalúa primero si loading es true. Si lo es, se retorna un párrafo con cargando... como loading skeleton. Cuando loading cambia a false, React vuelve a renderizar y ya hay datos disponibles para llamar a getTodo(id) y obtener todo.text.

Este patrón de guard clause evita que la app intente leer propiedades de objetos que aún no existen.

¿Cómo usar useLocation para transmitir datos entre rutas?

Incluso con el estado de carga resuelto, queda un problema de UX: si el home ya tiene los todos cargados, esperar otros tres segundos al editar es absurdo. Aquí entra useLocation, un custom hook de React Router DOM v6 que permite recibir información transmitida desde otra ruta [13:20].

Desde el home, la función navigate acepta un segundo argumento con una propiedad state. Ahí se envía el todo completo:

js navigate(/edit/${todo.id}, { state: { todo: todo, }, });

En EditTodoPage, useLocation() expone ese estado a través de location.state.todo. Si existe, el texto está disponible al instante, sin esperar la carga.

¿Qué pasa si el usuario recarga la página directamente?

Cuando alguien entra por URL directa o recarga, location.state será undefined porque no hubo navegación previa. Para evitar errores, se usa el operador de encadenamiento opcional ?.:

js let todoText = ''; if (location.state?.todo) { todoText = location.state.todo.text; } else if (loading) { return <p>cargando...</p>; } else { todoText = todo.text; }

Esta cascada cubre tres escenarios: navegación con datos transmitidos, recarga directa con estado de carga, y recarga directa con datos ya disponibles desde getTodo.

¿Qué es useLocation en React Router DOM v6? Es un hook que devuelve el objeto location actual, incluyendo state, donde se puede leer información transmitida por navigate desde otra ruta.

¿Cómo se conecta defaultTodoText con el textarea?

Dentro de TodoForm, el estado del textarea se inicializa con React.useState. En lugar de arrancar siempre con un string vacío, se evalúa la prop recibida:

js const [newTodoValue, setNewTodoValue] = React.useState( props.defaultTodoText || '' );

Si defaultTodoText viene con contenido, se usa como valor inicial. Si no, queda vacío para no romper el componente cuando se reutiliza al crear un todo nuevo.

El resultado es una experiencia fluida: al editar desde el home, el texto aparece de inmediato; al recargar, se muestra brevemente el estado de carga y luego el texto. Sin pantallas vacías ni reescrituras forzadas.

¿Cómo organizarías tú la lógica entre state y stateUpdaters dentro del custom hook? Cuéntalo en los comentarios.

Harold Zurita Simon

Hace 2 años

useLocation: transferencia de datos por navegación

. Para concluir la migración de portales y modales a rutas, vamos a recuperar el texto del todo que estamos editando, para no tener que volverlo a escribir si fuera un pequeño cambio. . En el componente HomePage vamos a modificar nuestra render prop onEdit. En la navegación vamos a necesitar pasar la información del TODO que estamos modificando por medio de options, el cual vendría a ser un objeto que permite una propiedad state que nos sirve para mandar datos hacia una ruta, en este caso la ruta /edit/:id. .

onEdit={() => {
              navigate(
                '/edit/' + todo.id,
                {
                  state: { todo }
                },
              );
            }}

. En el componente EditTodoPage vamos a utilizar el react hook useLocation para recibir la información del TODO que se nos pasó por navegación en state. . Dentro de la ruta de editar TODOs tenemos 2 posibilidades para llegar a la ruta /edit/:id; es decir, por medio del botón de editar TODO o de forma directa a través de la url. . Sucede que al ingresar por la url, internamente se deben de cargar los TODOs antes de poder realizar cualquier acción. Este proceso se muestra dentro el código del react hook useLocalStorage, donde estamos simulado que estamos realizando peticiones a una API por medio de un setTimeout para obtener los TODOs. . Por esta razón, para evitar problemas de sobreescritura o similares, vamos a manejar el estado de loading que nos proporciona useTodos. Esto nos permite saber cuando terminamos de cargar los TODOs, por lo que tendremos una variable todoText que va a cambiar según la situación: .

Si accedemos por medio del botón de editar algún TODO, significa que tendremos la información del mismo en location y podremos tomar el texto de location.state.todo.text. .
Si no tenemos la información en location, significa que estamos accediendo por url y que los TODOs aún deben cargar. Por lo que si loading es verdadero entonces renderizamos un mensaje de carga. .
Si loading es falso significa que los TODOs terminaron de cargar, por lo que podemos buscar el TODO por su ID por medio de la función getTodo, y luego recuperar su texto.

. Cualquiera que sea el modo en que obtengamos el texto del TODO, vamos a pasarlo como prop defaultTodoText a FormTodo. .

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

function EditTodoPage() {
  const location = useLocation();
  const params = useParams();
  const id = Number(params.id);
  
  const { state, stateUpdaters } = useTodos();
  const { loading, getTodo } = state;
  const { editTodo } = stateUpdaters;

  let todoText;
  
  if (location.state?.todo) {
    todoText = location.state.todo.text;
  } else if (loading) {
    return <p>Cargando...</p>
  } else {
    const todo = getTodo(id);
    todoText = todo.text;
  }

  return (
    <TodoForm
      label="Edita tu TODO"
      defaultTodoText={todoText}
      submitText="Editar"
      submitEvent={(newText) => editTodo(id, newText)}
    />
  );
}

export { EditTodoPage };

. En el react hook useTodos como se mencionó anteriormente se tiene a una función getTodo que recibe un id y busca el TODO entre todos los TODOs y lo retorna. A su vez, esta función se retorna dentro del objeto state. .

...

function useTodos() {
	...
  const getTodo = (id) => {
    const todoIndex = todos.findIndex(todo => todo.id === id);
    return todos[todoIndex];
  }
  ...
  
  const state = {
	  ...
    getTodo,
  };
  ...

  return { state, stateUpdaters };
}
...

export { useTodos };

. Finalmente, en TodoForm el estado incial de newTodoValue será props.defaultTodoText o un string vacío. .

const [newTodoValue, setNewTodoValue] = React.useState(props.defaultTodoText || '');

Comentarios (18)18 comentarios

Edgardo Andres Vargas Saenz

Hace 4 años

Diego Reyes Cabrera

Bramucci Candela

Axlin Miranda

Adrian Villamil

Raycris Maldonado

Angel David Contreras Barrios

Juan Pablo Cortés

Laura Naranjo

Hace 3 años

Jose Miguel Valero Reyes

Luis Angel Olivárez Estrada

Jhunior Eduardo Guevara Lázaro

Irving Juárez

Armando Rivera

David Espino

milton coronado

Sebastian Carballo

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

Texto por defecto en textarea con useLocation