No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Checkout de productos en el carrito

22/31
Recursos

Aportes 23

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Otra opci贸n para quitar la x de mi ultima orden es

            <div className="flex items-center gap-2">
                <p className="text-lg font.medium">{price} </p>

                {
                    handleDelete &&                 
                    <XMarkIcon
                    onClick={()=>handleDelete(id)}
                    className="h-4 w-4 text-black cursor-pointer "/>
                }

            </div>

Creo que tambien deberiamos cerrar la ventana de checkout cuando pasamos al link de myOrder, solo agregamos context.closeCheckoutSideMenu() en la funcion handleChekout.

    const handleCheckout = () => {
        const orderToAdd = {
            date: '01.02.23',
            products: context.cardProducts,
            totalProducts: context.cardProducts.length,
            totalPrice: totalPrice(context.cardProducts)
        }

        context.setOrder([...context.order, orderToAdd])
        context.setCardProducts([])
        context.setCount(0);
        context.closeCheckoutSideMenu()
    }

鈽 odio cuando tengo el c贸digo bien y me salen errores, tardo minutos o hasta horas en dizque encontrar el error, y lo 煤nico que debo de hacer es reiniciar la p谩gina o el npm run dev.

En vez de utilizar slice podriamos utilizat .at(-1)
asi nos trae el ultimo elemento

Me estaba arrojando error en MyoRDER CON LA EXPRESI脫N:

context.order?.slice(-1)[0].products.map(product => ( ...)

Tuve que moodificar la expresi贸n por:

{
        context.order && context.order.length > 0 ? 		 
  	context.order.slice(-1)[0].products.map(product => (
                    <OrderCard 
                    key={product.id}
                    id={product.id}
                    title ={product.title}
                    imageUrl = {product.images}
                    price= {product.price}
                    
                    />
                    
              ))
              : <p>No hay productos en la orden.</p>
            }

Ac谩 explico que significa cada pieza de c贸digo:

  1. context.order && context.order.length > 0: Esta parte es una comprobaci贸n condicional que verifica si 鈥渃ontext.order鈥 existe y si tiene al menos un elemento en su interior. Si ambas condiciones se cumplen, el c贸digo despu茅s del signo 鈥?鈥 ser谩 evaluado.

  2. context.order.slice(-1)[0].products.map(鈥) : Si 鈥渃ontext.order鈥 existe y tiene al menos un elemento, se procede a realizar una operaci贸n en la propiedad 鈥減roducts鈥 del 煤ltimo elemento de la matriz 鈥渃ontext.order鈥. La funci贸n 鈥渟lice(-1)鈥 se utiliza para obtener el 煤ltimo elemento del array, y luego se accede a su propiedad 鈥減roducts鈥 para realizar un mapeo de los elementos de esa propiedad.

  3. map(product => 鈥): Aqu铆, el c贸digo realiza un mapeo de cada elemento del array 鈥減roducts鈥 del 煤ltimo elemento de 鈥渃ontext.order鈥. Por cada elemento en 鈥減roducts鈥, se renderiza un componente 鈥淥rderCard鈥 con las propiedades 鈥渋d鈥, 鈥渢itle鈥, 鈥渋mageUrl鈥 y 鈥減rice鈥 obtenidas de cada elemento de 鈥減roducts鈥.

  4. : <p>No hay productos en la orden.</p>: Si 鈥渃ontext.order鈥 no existe o no tiene elementos (length igual a 0), se renderiza el p谩rrafo 鈥<p>No hay productos en la orden.</p>鈥 en lugar de la lista de 鈥淥rderCard鈥. Esto sirve para indicar al usuario que no hay productos en la orden o que la orden est谩 vac铆a.

Puede ser as铆 tambi茅n para que se vea un poquito m谩s limpio.

A la maestra no se le resaltan los errores de JS en VS Code, simplemente instalen la extensi贸n de Error Lens y tendr谩n resaltado de errores antes de que los tengan que ver en el navegador 馃槃

Si les aparece un error por intentar encontrar una propiedad de 鈥渦ndefined鈥, recuerden que hacerle un map a un objeto undefined va a resultar en una excepci贸n que no permite visualizar los dem谩s componentes gr谩ficos. Usen el 鈥樷?"鈥 para verificar si la variable u objeto existe primero.

Ej:

context.shoppingCartOrder?.slice(-1)[0]?.products.map( product =>
                        <OrderCard
                            key={product.id}
                            id={product.id}
                            title={product.title}
                            imgUrl={product.images}
                            price={product.price}
                        />
Mi solution para que el sideMenu se oculte despues de hacer checkout. ![](https://static.platzi.com/media/user_upload/image-2e60271c-516f-4333-b152-9b7c11d9a9eb.jpg)
El "error" que aparece en la consola al recargar se debe a que estamos ubicados en el endpoint "my-orders/last". Como no estamos utilizando persistencia de datos, al recargar la pag los productos agregados en "order" se pierden. Por ese motivo nos sale ese error ya que no puede hacer el "products.map()" por que es undefined.
podemos usar este div que ya teniamos para poder mostrar tambien el totalPrice the nuestra ultima orden: ```js

Total: ${context.order?.slice(-1)[0].totalPrice}

```
Esto solucion贸 el problema: ```js { context.order?.slice(-1)[0]?.products?.map(product => { return ( <OrderCard key={product.id} id={product.id} title={product.title} image={product.images} price={product.price} /> ) }) } ``` 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽
```js // ORDERCARD.TSX import { XMarkIcon } from "@heroicons/react/24/solid" import { Items } from "../../Global/globalConst" export const OrderCard = ({ id, title, price, image, handleDelete }: Items): JSX.Element => { let renderXmarkIcon: JSX.Element = <XMarkIcon className='h-6 w-6 cursor-pointer' onClick={() => handleDelete({ id })} /> return (

{title}

${price}

{handleDelete && renderXmarkIcon}
) } ```*//MYORDERS.TSX*import { useShoppingContext } from '../../Context/Context';import { Layout } from '../../Components/Layout/Layout';import { OrderCard } from '../../Components/OrderCard/OrderCard';import { Props } from '../../Global/globalConst';import './MyOrder.css'; export *const* MyOrder = ({ }: Props): any => { 聽 聽 *const* { order } = useShoppingContext(); 聽 聽 *return* (聽 聽 聽 聽 \<Layout>聽 聽 聽 聽 聽 聽 \

MyOrders\

聽 聽 聽 聽 聽 聽 \
聽 聽 聽 聽 聽 聽 聽 聽 {order.slice(-1)\[0]?.product.map(item =>聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 \<OrderCard聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 key={item.id}聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 {...item}聽 聽 聽 聽 聽 聽 聽 聽 聽 聽 />聽 聽 聽 聽 聽 聽 聽 聽 )}聽 聽 聽 聽 聽 聽 \
聽 聽 聽 聽 \</Layout>聽 聽 )} ```js //MYORDERS.TSX import { useShoppingContext } from '../../Context/Context'; import { Layout } from '../../Components/Layout/Layout'; import { OrderCard } from '../../Components/OrderCard/OrderCard'; import { Props } from '../../Global/globalConst'; import './MyOrder.css'; export const MyOrder = ({ }: Props): any => { const { order } = useShoppingContext(); return ( <Layout>

MyOrders

{order.slice(-1)[0]?.product.map(item => <OrderCard key={item.id} {...item} /> )}
</Layout> ) } ```

As铆 me qued贸 My order

Para los que tienen el error de que slice no es una funcion y ya verificaron la mejora que hizo la profe, aseguremos que al setear el valor del estado order sea como un array y no como un objeto: ![](https://static.platzi.com/media/user_upload/image-d1242f59-2271-41db-85ad-aef8c68194dc.jpg)
En el momento en que ustedes recarguen y no tengan ordenes que mostrar les generara un error, me parecio curioso que ```js context.order?.slice...... ```No funcionara, por ende hice una segunda validaci贸n para mostar un mensaje en pantalla en caso de a煤n no hayamos a帽adido ordenes. ```js <Layout> MyOrder
{ context.order.length >= 0 ? (

No se han a帽adido ordenes a煤n

) : ( context.order?.slice(-1)[0].products.map(product => ( <OrderCard key={product.id} id={product.id} title={product.title} imageURL={product.images} price={product.price} /> )) ) }
</Layout> ```

Otra opci贸n pa renderizar la x icon es verificar si tenemos productos en nuestro estado productToCart, si no hay nada no muestra la x, recuerda que una vez nuestros productos se envian a my order, nuestro carrito se queda vacio entonces no deberia renderizar la x en nuestro componente:

const renderXmarkIcon = productToCart.length > 0 ? true : false

{
          renderXmarkIcon && <div 
          onClick={(e) => productRemoveFromCart(e, id)}
        >
        <XmarkIcon />
        </div>
        }

Asi Vamos鈥

Si tienen este error:
Para solucionar el error debemos de envolver los componentes de React-Router-DOM (Link, NavLink鈥) o componentes que usan estos, dentro de BrowserRouter.

Esto nos permitira usar todos los componentes provenientes de React-Router-DOM de manera general en la aplicacion, en los componentes hijos de BrouserRouter en el componente App.

Para los que tengan el problema de que no les muestra los productos en MyOrder, verifiquen que tengan bien definido el estado order. Que por default sea un array, mas no un objeto鈥 Me llev贸 casi tres d铆as darme cuenta, as铆 que verifiquen su c贸digo cuantas veces sean necesarias.

//order est谩 definido en la carpeta Context del proyecto

<const [order, setOrder] = useState([])> 

La condici贸n mostrada en el componente de myOrder que va en un if debe de ir dentro de un useEffect, dejando el if as铆 es un evento no controlado, otra opci贸n es dentro del HTML una condici贸n con &&.

Para los que tengan problemas haciendo mostrar las 贸rdenes en 鈥淢yOrder鈥 con el m茅todo 鈥渟lice鈥, otra alternativa es hacer:

order[order.length -1].products.map(productInfo => ...

Otra forma de hacerlo es con el hook useNavigate!