Aprender a mostrar el detalle de una orden recién creada en una vista independiente es uno de los pasos clave al construir un e-commerce con React. Aquí verás cómo enlazar el botón de checkout con la página My Order, leer los datos desde un context global y renderizar las tarjetas de productos comprados.

Cómo enlazar el botón de checkout con la vista My Order

El primer reto es convertir el botón que ejecuta el checkout en un enlace que también redirija al detalle de la última orden. Para eso, React Router Dom trae el componente Link, que envuelve el botón sin perder su funcionalidad.

La importación se hace en la parte superior del componente, justo después de las importaciones de React:

jsx import { Link } from 'react-router-dom'

Luego encapsulas el botón dentro del Link y defines la ruta de destino, que en este caso apunta a /my-orders/last. Ese sufijo last es la pista que usaremos después para mostrar la orden más reciente.

¿Qué hace el componente Link de React Router Dom? Convierte un elemento en un enlace de navegación interna sin recargar la página, manteniendo el estado de la aplicación.

Cómo registrar la ruta dinámica en el index de rutas

Si al hacer clic en checkout aparece un not found, significa que la ruta /my-orders/last aún no existe en el archivo principal de rutas. La solución es registrarla apuntando al componente MyOrder.

Dentro del archivo de rutas duplicas la entrada existente y le indicas que cuando la URL sea /my-orders/last, debe renderizar MyOrder. Con eso ya tienes la página visible al ejecutar el checkout.

Cómo leer la orden desde el shopping cart context

El componente MyOrder necesita acceder al estado global donde se guardan las órdenes. Para eso importas useContext de React y el ShoppingCartContext que ya está definido en el proyecto.

Dentro del componente extraes el contexto así:

jsx const context = useContext(ShoppingCartContext)

Esto te da acceso a context.order, que es el array donde se almacenan todas las órdenes generadas.

Cómo mostrar solo la última orden con slice

La idea es que MyOrder muestre únicamente la compra más reciente, no el historial completo. Aquí entra el método slice, que permite extraer una porción de un array sin modificar el original.

• context.order.slice(-1) devuelve un array con el último elemento.
• [0] accede a ese objeto único dentro del array.
• Sobre ese objeto se accede a la propiedad products.
• Con .map() se itera para renderizar cada tarjeta.

El encadenamiento queda así: context.order.slice(-1)[0].products.map(...). Sin el [0] y el acceso a products, React intenta renderizar un objeto completo y lanza el error de que algo is not a function.

¿Para qué sirve slice(-1) en JavaScript? Extrae el último elemento de un array y lo devuelve dentro de un nuevo array, sin modificar el original.

Cómo reutilizar OrderCard sin el botón de eliminar

La misma tarjeta que aparece en el CheckoutSideMenu se reutiliza en MyOrder, pero con una diferencia: aquí no tiene sentido eliminar productos, porque la compra ya se concretó.

La estrategia es renderizar el ícono de eliminar de forma condicional según si se recibe la prop handleDelete. Dentro de OrderCard se declara una variable que guarda el ícono solo cuando esa prop existe:

jsx let renderXMarkIcon if (handleDelete) { renderXMarkIcon = <XMarkIcon ... /> }

Luego, en el JSX, se inserta {renderXMarkIcon} en el lugar donde antes estaba el ícono fijo. Resultado: en el checkout lateral aparece la X para eliminar, pero en la vista de orden final no.

Cómo limpiar el estilo del contenedor de productos

El contenedor original tenía overflow con scroll porque vivía dentro de un menú lateral estrecho. En MyOrder hay espacio de sobra, así que conviene quitar el scroll y ajustar el layout.

Los estilos quedan reducidos a:

• flex para activar flexbox.
• flex-col para apilar las tarjetas en columna.
• w-80 para fijar el ancho del listado.

Con eso la lista de productos comprados se ve limpia, sin barras de desplazamiento innecesarias.

Cómo depurar cuando la orden no se renderiza

Un truco práctico durante este flujo es comentar el bloque de renderizado y agregar un console.log(context.order) para ver qué llega realmente desde el contexto.

Al inspeccionar el objeto encuentras propiedades como date, products, totalPrice y totalProducts. Confirmar que products existe es lo que te indica que debes acceder a esa propiedad antes de hacer .map(). Es un paso pequeño que ahorra mucho tiempo cuando aparece un error genérico.

¿Qué te ha costado más al trabajar con context y rutas dinámicas en React? Cuéntalo en los comentarios.