Vista My Account con conditional rendering

Construir una página de My Account en React te permite mostrar la información del usuario y editarla en tiempo real, conectándola con el local storage. Esta vista es clave en cualquier prueba técnica de frontend porque combina conditional rendering, formularios y manejo de estado, tres habilidades que reclutadores evalúan constantemente.

¿Cómo se construye la vista My Account paso a paso?

La solución parte de dos cambios concretos en el proyecto, descritos en el pull request número nueve [01:00].

Primero, hay que reemplazar el correo quemado del navbar por el email real del usuario. Para lograrlo, traes la información de account que ya está disponible en el componente Navbar y la inyectas en el campo correspondiente.

Segundo, creas la página MyAccount, donde aplicas conditional rendering mediante un componente llamado RenderView. Según el estado local, esa vista alterna entre dos pantallas: una para visualizar y otra para editar.

¿Qué es el conditional rendering en React? Es una técnica que muestra distintos componentes según el valor de una variable de estado. Si el estado dice ver, renderiza la información; si dice editar, renderiza el formulario.

¿Qué hace el componente RenderUserInfo?

Este componente se encarga solo de mostrar datos, nada más [02:30]. Lee la información de account desde el local storage y la pinta en pantalla junto con un botón Edit. Ese botón tiene un onClick que cambia la vista, exactamente como ya hiciste en la pantalla de Sign in.

¿Y qué hace RenderEditUserInfo?

Es el formulario que aparece al pulsar Edit. Su estructura es idéntica a la del formulario de creación de cuenta:

• Un elemento form que envuelve los campos.
• Sus respectivos label e input precargados con los datos actuales.
• Un botón final llamado Editar que guarda los cambios y vuelve a la vista de solo lectura.

La precarga de los campos es importante porque le dice al usuario qué tiene guardado y qué puede modificar.

¿Cómo se editan los datos del usuario en local storage?

La lógica de edición replica el flujo de creación de usuario [03:45]. Tomas la información del formulario y la vuelves a setear sobre el objeto account que ya existe en local storage. Así, cuando el usuario hace clic en Editar, los cambios se reflejan tanto en la vista como en el almacenamiento del navegador.

Por ejemplo, si cambias el nombre a 123123 y el email a 123123, al confirmar verás de inmediato la actualización en la pantalla y en el local storage.

¿Por qué usar local storage en lugar de un backend? En una prueba técnica de frontend, el local storage simula la persistencia sin depender de un servidor. Es rápido de implementar y suficiente para demostrar manejo de estado y sincronización de datos.

¿Qué detalles visuales mejoran la experiencia final?

Durante las pruebas finales aparecieron dos ajustes pequeños pero relevantes, agrupados en el último pull request [05:10].

El primero corrige un texto desalineado dentro de las cards de producto. La solución usa items-center de Flexbox en Tailwind para centrar verticalmente el texto respecto al precio.

El segundo cambia el background del navbar. Antes, al hacer scroll, el contenido se entrecruzaba con las imágenes y los ítems del menú no se leían bien. La solución fue aplicar la clase bg-white de Tailwind para fijar un fondo blanco sólido.

¿Por qué importan estos detalles en una prueba técnica?

Porque revelan tu criterio de UI más allá de la funcionalidad. Un reclutador no solo evalúa que el código corra; también revisa si notas estos pulidos:

1. Alineación consistente entre elementos relacionados.
2. Contraste suficiente para que el contenido sea legible al hacer scroll.
3. Uso correcto de utilidades de Tailwind como items-center y bg-white.
4. Coherencia visual entre vistas como Sign in, My Account y el listado de productos.

Con estos ajustes, la prueba técnica queda completa: navegación funcional, autenticación simulada, gestión de cuenta editable y una interfaz pulida.

Muéstrame en los comentarios cómo resolviste tu versión y si encontraste un camino distinto al usar conditional rendering o al sincronizar el formulario con el local storage.