Eliminando productos del carrito

Clase 26 de 30 • Curso de React 17 con Webpack 5 y Sass

Favian H. Angarita

student•

Problemas: 1- Warning sobre la key repetida al agregar al carrito el mismo elemento. 2- Si los "productos" agregados son exactamente el mismo, al darle a la X en uno solo, se borran todos los elementos agregados al carrito.

Soluciones: 1- Esto sucede en ../containers/MyOrder.jsx dado que se está usando key={product. id} y pues cuando se agregue al carrito los elementos harán referencia al mismo, o sea React dice como, WTF porque se está renderizando el mismo componente ¿?, el Virtual DOM llora, a React le gustan las keys únicas... Pero es fácil solucionarlo, dado que, map, tiene como su segundo termino, el index del vector de COMPONENTES <OrderItem /> que se está renderizando. Por lo que solo hay que cambiar en esa parte lo siguiente:

{state.cart.map((product,index) => (
		<OrderItem 
			indexValue={index}
			key={index}
			product={product} 
		/>
))}

Si te fijaste, hay dice también indexValue={index}, eso es para solucionar el problema 2.

2-Que se borren todos al querer solo eliminar uno, es porque se estaba utilizando como condicional del filter en useInitialState.js el id del producto, y pues si son iguales, pos todos cumplen con la condición. 😅

Así que solo hay que llevar ese valor de indexValue a OrderItem.jsx, y NO product.

const OrderItem = (props) => {
	// a mi me gusta asi, pero puedes poner lo que esta 	 
        // dentro de { } ahí arriba en vez de props
	const { product, indexValue } = props
	const { removeFromCart } = React.useContext(AppContext)

	const handleRemove = (index) => {
		removeFromCart(index)
	}
	return (
		<div className="OrderItem">
			<figure>
				<img src={product.images[0]} alt={product.title} />
			</figure>
			<p>{product.title}</p>
			<p>{product.price}</p>
			<img 
				src={iconClose} 
				alt="close" 
				onClick={() => handleRemove(indexValue )}
			/>
		</div>
	);

}

export default OrderItem;

Ahí le estamos pasando un indexValue unico del vector que se esta creando en addToCart a handleRemove.

Veamos entonces que pasa con ese filter de useInitialState.js:

  const removeFromCart = (indexValue) => {
    setState({
      ...state,
      cart: state.cart.filter((product,index) => index !== indexValue),
    })
  }

Si, ya se, product queda de "adorno" pero pues filter funciona así, filter(element, index), y nosotros solo necesitamos el index. Ese condicional lo que dice es: "SALVA TODOS" los elementos (<OrderItem />) del vector state.cart que NO tengan ese indexValue que llega. El index que llega por supuesto es al que le hacemos click. Por lo tanto, lo saca del vector y el nuevo vector state.cart es sin ese elemento al que hicimos click en la X.

Gráficamente seria (esto es solo ilustrativo, ni es una sintaxis correcta 😬):

</MyOrder>

Besos :*

Iván Rodríguez

student•

Gracias, eres dios

Diego Loyola

student•

Excelente solución! para que product no quede como adorno lo puedes reemplazar por un _ y te quedaría así:

cart: state.cart.filter((_, index) => index !== indexValue)

es solo una mejora, pero gracias por compartir tu solución!

Francisco Garay

student•

Después de pensar un rato la solución más simple que encontré fue pasarle tanto el payload como el index, tal que así: useInitialState.js

const removeFromCart = (payload, indexValue) => {
    setState({
      ...state,
      cart: state.cart.filter(
        (item, index) => item.id != payload && index != indexValue
      ),
    });
  };

jorge nova ferrer

student•

Cómo pasas el valor de indexValue ?

Francisco Garay

student•

Utilizo el parámetro index del método map y se lo paso al componente OrderItem

MyOrder.jsx

{state.cart.map((item, index) => (
          <OrderItem item={item} key={index} index={index} />
))}

OrderItem.jsx

const OrderItem = ({ item, index }) => {
  const { removeFromCart } = useContext(AppContext);
  const handleRemove = (product) => {
    removeFromCart(product, index);
  };
  return (
    <div className="OrderItem">
      <figure>
        <img src={item.images[0]} alt={item.title} />
      </figure>
      <p>{item.title}</p>
      <p>${item.price}</p>
      <img src={closeIcon} alt="close" onClick={() => handleRemove(item)} />
    </div>
  );
};

Johan Muñoz

student•

Como solucion al problema del id, lo que hice fue que basicamente al agregar un item al carrito creo un nuevo id correspondiente a la longitud del carrito, y al removerlo lo remuevo tomando en cuenta el id nuevo asi:

const addToCart = (payload) =>{
        setState({
            ...state,
            cart : [
                ...state.cart,
                {...payload, idCart:state.cart.length+1},
            ]
        })
    }
    const removeFromCart = (payload) => {
        setState({
            ...state,
            cart: state.cart.filter((product)=>product.idCart!==payload.idCart)
        })
    }```

Juan Manuel Franco Laporta

student•

Muchas gracias

Carlos Augusto Castro Corrales

student•

es la mejor siolucion, sin complicarse tanto y solo hay que hacer ese cambio en idCart, y funciona bien con lo del curso sin cambiar mas cosas.

Josafat Muñoz Valverde

student•

Si eliges el mismo elemento varias veces y después eliminas 1, se eliminarán todos porque todos comparten el mismo id.

Hernán David Mercado Fernández

student•

Sería bueno resolver ese bug como reto

Santiago Lopera Naranjo

student•

Puedes crear un id especial a los atriculos añadidos, así como creamos una key, para el OrdemItem, creas una para cada producto añadido, y ya luego filtras y eliminas por esta

Rafael Moro

student•

JAJAJAJAJAJA su reacción cuando dice "ok... no funcionó" vale oro

Santi Orduno

student•

Recomiendo agregar un pointer al icono de borrar del carrito

OrderItem.scss

.OrderItem img {
	cursor: pointer;
}

Fernando Molano Castrillón

student•

Buena idea pero te recomiendo que le pongas una clase solamente a esa img que contiene el icono de X y editas esa clase en CSS. De lo contrario te va a poner el pointer a todas las img que vivan dentro de OrderItem.

Santiago Lopera Naranjo

student•

Si agregamos el mismo elemento, primero, react nos dará el error que OrderItem tiene varios elementos con la misma Key, y si eliminamos uno de estos de estos del carrito también se borraran todos.

Para dar una solución a esto, en product item, yo usé Math.random para crear un id unico para item añadido al carrito y funciona bien.

const handleCart = (product) =>{
    let idItemInCart =  Math.floor(Math.random() * (500000 - 1000)) 
		addToCart({...product,idItemInCart})
	}

Si bien entre 500.000 y 1000 la probabilidad de que repita es poca para la canitdad de elementos que tenemos, sé que esto no es buena practica...

Alguien sabe de alguna mejor forma?

Nazareno Aznar Altamiranda

student•

Podés armar una funcion recursiva que primero chequee si el ID ya existe, y en el caso de que ya exista devolver la misma funcion pero con ID+1

const verifyIdDoesNotExist = (id) => {
    const idExist = state.cart.some(item => item.id === id)

    if(idExist) {
      console.log('true')
      return verifyIdDoesNotExist(id + 1);
    } else {
      console.log('false')
      return id;
    }
  }

 const addToCart = (payload) =>  {
    const newId = verifyIdDoesNotExist(payload.id)
    const payloadWithNewId = {
      ...payload,
      id: newId,
    }

    console.log(payloadWithNewId)
    setState({
      ...state,
      cart: [...state.cart, payloadWithNewId]
    })
  }

Santiago Lopera Naranjo

student•

Es una forma interesante. gracias compañero. :D

Tomás André Peñaloza Avilés

student•

Solución: Bug al eliminar productos repetidos

Para comenzar, el key de cada OrderItem debería estar ligado a su posición en el array de cart para que realmente sea único. Pero los valores de key sirven a React y no son pasados al componente así que necesitamos otro atributo para pasar el valor del index al componente. Esto lo hacemos así: . MyOrder.js

<div className="order-products">
	{cart.map( (product, index) => (
            <OrderItem product={product} key={`order-item-${index}`} keyIndex={index} />
          ))}
          
</div>

. El componente OrderItem recibe el producto y su keyIndex. Pero solo se necesita el keyIndex para disparar la función removeFromCart. . OrderItem.js

function OrderItem ({product, keyIndex}) {

  const { removeFromCart } = useContext(AppContext);

  const handleRemove = () => {
    removeFromCart( keyIndex);
  }

  return (
    <div className="orderItem">
      <figure className="orderItem__img">
        <img src={product.images[0]} className="orderItem__img" alt={product.title} />
      </figure>
      <p className="orderItem__name">
        {product.title}
      </p>
      <p className="orderItem__price">
      ${product.price} 
      </p>
      <img src={iconClose} alt="close" onClick={ handleRemove} />
    </div>

  );
}

. Finalmente, la función de removeFromCart funcionaría con el método splice para cortar un elemento de cart en la posición keyIndex. (recuerda que para usar splice se necesita crear una copia del array a modificar)

    const removeFromCart = (keyIndex) => {
        const newCart = state.cart;
        newCart.splice(keyIndex,1);

        setState({
            ...state,
            cart: newCart
        })
    }

Yohan Manuel Estevez Rueda

student•

Excelente aporte, casi muero en el intento tratando de entender la lógica del filter y el por qué se eliminaban todos los elementos repetidos, pero como planteas la solución lo entendí Super bien. Muchas gracias

Braulio Rivas Abad

student•

Vamos creando la lógica para crear una función que elimine productos del carrito. Recordemos, que la función para poder añadir la teníamos en nuestro hook, así que ahí mismo vamos a crear una función para eliminar.

// useInitialState
import { useState } from "react";

const useInitialState = () => {
    const removeFromCart = (payload) => {
        setState({// minificado
            cart: state.cart.filter(item => item.id !== payload.id),
        })
    }

    return {
        state,
        addToCart,
        removeFromCart,
    }
}

export default useInitialState;

Dentro del hook, vamos a crear una función llamada removeFromCart. Esta función recibirá como parámetro un payload ( o el producto ), y después actualizaremos el estado. Para ello, con ayuda de setState, indicamos que ahora el estado seguirá siendo un objeto, donde cart, será el array, PERO usaremos el método filter, donde eliminaremos el item del array con ayuda de su id, y después regresará el array sin este elemento. Al final, tenemos que regresar la nueva función en el hook, es decir, añadir return ... , removeFromCart.

// OrderItem.jsx
import React, { useContext } from 'react';
import AppContext from '@context/AppContext';

const OrderItem = ({ product }) => {
	const { removeFromCart } = useContext(AppContext);

	const handleRemove = () => {
		removeFromCart(product);
	}

	return (
		<div className="OrderItem">
			<img src={icon_close} alt="close" onClick={() => handleRemove(product)} />
		</div>
	);
}

export default OrderItem;

Recordemos, que el ícono de eliminar, lo tenemos en OrderItem, así que este componente será el encargado de usar la función para remover el producto. Para ello, debemos importar también useContext para poder trabajar con el contexto. Para implementar la función, creamos una constante donde traemos la función removeFromCart del contexto. Después, creamos una función que se encargará de manejar el click sobre el ícono de eliminar. En esta función, siempre ejecutaremos la función removeFromCart con el argumento product, para eventualmente quitarlo de nuestro carrito de compras.

Orlando Daniel Montes Antonio

student•

Una manera para manejar el error del id es que pueden agregar una parte que les permita elegir cantidad y ya solo lo multiplican por el costo del producto.

Obed Paz

student•

Justamente implementé la misma solucion, me parece mas sencilla que los demas aportes de generar nuevos ids. . Mejor solo validamos que no se agregue un mismo item dos o mas veces, y en el componente order implementamos un counter y le sumamos el valor del precio con la multiplicacion.

Max Andy Diaz Neyra

student•

Opinion: Mencionan muchos que hay un problema a la hora de eliminar los item, pues pueden agregar el mismo y generarse id repetidos. Yo propongo evitar que se pueda agregar item de igual id, pues no tiene sentido agregar 2 veces el mismo elemento, en todo caso deberia asignarse a un mismo elemento una cantidad variable. Aqui mi codigo para impedir que se agregue elementos de id repetodo

const useInitialState = () =>{
...

    const addToCart = (payload) =>{
        if(!state.cart.includes(payload)){
            setState({
                ...state,
                cart:[...state.cart, payload]
            })
        }
    }
...
}

export default useInitialState;

Diego Fernando Caviedes Camaho

student•

buen dato!:

Pedro Miguel Chavez Garcia

student•

Para poder agregar solo 1 de por producto y no se repita productos

const addToCart = (payload) => {
        const payloadExist=state.cart.filter((item) => item.id == payload.id);
        if(payloadExist.length==0){
            setState({
                ...state,
               cart: [...state.cart, payload]
            });
        }
    };

Para poder eliminar productos sin ningún problema

const removeFromCart = (payload) => {
        setState({
            ...state,
            cart: state.cart.filter(
                (item) => item.id != payload.id),
        });
    };

Luis Felipe Medina Rodriguez

student•

no use el Id por el error que todos sabemos, entonces use

	const hora = new Date();

para enviar a ProductItem

{products.map((product, index) => (
	<ProductItem product={product} milisegundos={hora.getMilliseconds()} key={index} />
) )}

y recibirlo por props

const ProductItem = ({product,milisegundos}) => {
	const {addTocart} = useContext(AppContext)

	const handleClick = (item,milisegundos) =>{ 
		item.milisegundos = milisegundos
		addTocart(item)
	}
	return (
		<div className="ProductItem">
			<img src={product.images[0]} alt="" />
			<div className="product-info">
				<div>
					<p>$ {product.price}</p>
					<p>{product.title}</p>
				</div>
				<figure onClick={()=> handleClick(product, milisegundos)}>
					<img src={addCart} alt="" />
				</figure>
			</div>
		</div>
	);
}

antes de enviar agregamso los milisegundos a item

const handleClick = (item,milisegundos) =>{ 
	item.milisegundos = milisegundos
	addTocart(item)
}

y removemos asi

  const removeFromCart = (payload ) =>{
        setstate({
            ...state,
            cart: state.cart.filter(items => items.milisegundos !== payload.milisegundos)
        })
    }

Juan Carlos Valencia López

student•

siempre pasamos la declaración de la función al onClick o cualquier otro evento, nunca una ejecución de la función a menos que la ejecución retorne la declaración de una función pero ese ya es otro detalle a considerar

Jose Fabio Ortega Estrada

student•

Este curso esta como muy avanzado, no estoy familiarizado con la sintaxis propuesta para agregar y remover articulos del shoppingCart, en el caso de addToCart es mas o menos logico, agregar un elemento al arreglo, simplemente listandolo en el , pero a la hora de eliminar, se aplica un filtro, en no entiendo como se elimina si por ningun lado se esta removiendo del arreglo. Me explican por favor. Como si tuviera 5 años :). Gracias.

Nicole Venachi Pizo

student•

Hola José, en los cursos básicos de JS, se aprende que hay algunos métodos que permiten recorrer el contenido del array, y realizar ciertas operaciones, en este caso el método .filter, te deveulve aquellos elementos del array que cumplen cierta condición. Es decir, de todos los elementos originales del cart, estamos trayendo aquellos que difieren en el id, logrando asi eliminarlo. Realmente no creo que esté muy avanzado el curso, pero sí hay que tener sólidos los conceptos más básicos de JS.

Lucas Aristizábal

student•

mi pregunta es por qué hace ese tipo de lógica con el initial state? no hay mejores formas de hacerlo? o no sé alguien me ayuda a digerirlo mejor, por que la forma de este profesor no ha sido muy buena, lo contrario, pésima, explica ahi por los lados las piezas de código más importantes.

Brandon Aray

student•

En el bug de los items repetidos, mi solucion fue crearles un "id" unico al momento de agregarlos asi no se confundia el componente al momento de identificarlos.

Acá cree un timestamp para detectar en que punto se fueron agregados al cart.

	const timestamp = new Date().getTime();

	const addToCart = (payload) => {
		setState({
			...state,
			cart: [
				...state.cart,
				{
					...payload,
					timestamp
				}
			]
		})
	}

Y acá estoy evaluando el id y el timestamp para para filtrar los elementos del cart asi esten repetidos.

	const removeFromCart = (payload,timestamp) => {
		setState({
			...state,
			cart: state.cart.filter(item => 
				item.id !== payload && item.timestamp !== timestamp)
		})
	}

Al final mi OrderItem queda tal que asi. Espero les pueda servir!

const OrderItem = ({product,id}) => {
  const { removeFromCart } = useContext(AppContext);
  const {title,price,images,timestamp} = product;

  const handleClick = (id,timestamp) => {
    removeFromCart(id,timestamp)
  }

  return (
    <div className="OrderItem">
      <figure>
        <img
          src={images[0]}
          alt={title}
        />
      </figure>
      <p>{title}</p>
      <p>${price}</p>
      <img src={CloseIcon} alt="close" onClick={() => handleClick(id,timestamp)} />
    </div>
  );
};

Sebastian Pacheco Lopez

student•

creando la función para toggleOrders y no haciéndolo directamente en el onClick, ademas añadiendo un pequeño condicional en los dos toggle, se puede abrir una de las dos pestañas, Menu o MyOrders, y cerrar a la otra en caso que este abierta, para que no haya interferencia entre las dos pestañas

const handleToggle = () => {
		if(toggleOrders) {
			handleToggleOrders();
		}
		setToggle(!toggle);
	}
	const handleToggleOrders = () => {
		if (toggle) {
			handleToggle();
		}
		setToggleOrders(!toggleOrders)		
	}

esto en Header.jsx

Misael Gomez

student•

Genial esto también lo vemos en el curso práctico de JavaScript, pero con html, css y JavaScript puros

Jhon Santiago

student•

Hola amigos les tengo un Hack cuando quieran acceder a sus componentes rapidamente presionen ctrl + colocar el mause sobre su componente y hacer click

Miguel Angel Goda Molina

student•

una forma sencilla sin modificar mucho el codigo fue en useInitialState modificar el addToCart y removeFromCart de la siguiente manera

  const addToCart = (payload) => {
    setState({
      ...state,
      cart: [...state.cart, { ...payload, idCart: state.cart.length + 1 }]
    });
  };

  const removeFromCart = (payload) => {
    setState({
      ...state,
      cart: state.cart.filter((product) => product.idCart !== payload.idCart),
    });
  }

si bien aparece un alerta que hay aun dos codigo identicos no da ningun problema al momento de agregar y eliminar

Eliminando productos del carrito

Introducción a React

¿Qué es React.js?

Conceptos fundamentales de React

Configurando el entorno de desarrollo para React

Análisis de dependencias en proyectos de React

Instalación de React y React DOM

Configuración de Webpack y Babel

Cambios en tiempo real con Webpack

React con CSS y Sass

Maquetación en React

Transformando HTML y CSS en componentes de React

Estilos en los componentes de React

Páginas, rutas y componentes

React Router DOM

Navegación entre rutas

Header en todas las rutas

¿Qué es Atomic Design? Conoce los beneficios

Solución al reto: componentes y rutas de React Shop

Tipos de componentes en React: stateful vs. stateless

Imágenes y alias en Webpack

Lógica con React Hooks

React.useState

Toggle del menú

useEffect y consumo de APIs

Custom Hooks para la tienda

useRef y formularios

React Context

Completando el carrito de compras

Orden de compra

Calculando el precio total

Eliminando productos del carrito

Deploy

Cómo comprar tu dominio y conexión con Cloudflare

Automatizando el despliegue con GitHub Actions

Próximos pasos

Retos de React.js (bug hunters)

Continúa con el Curso Práctico de Next.js