No tienes acceso a esta clase

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

Curso Pr谩ctico de React.js

Curso Pr谩ctico de React.js

Oscar Barajas Tavares

Oscar Barajas Tavares

Completando el carrito de compras

23/30
Recursos

Aportes 10

Preguntas 8

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Podemos destructurar las propiedades del objeto initialState definidos en el hook useInitialState de la siguiente forma:

const {state:{cart}}=useContext(AppContext);

De esta manera nos evitamos escribir state. cada que hagamos referencia a una propiedad del objeto.

 {cart.length > 0 ? <div>{cart.length}</div> : null}

Puede que no sea muy relevante en este caso鈥 Por el momento, pero imaginate cuando tengamos un objeto con muchas propiedades. 馃榾馃挌

Una alternativa es usar el operador 鈥&&鈥 y as铆 evitar poner la validacion negativa:

 {cart.length > 0 && <div>{cart.length}</div>}

Sugerencia para el profesor: utilizar menos palabras de decoraci贸n (muletillas):

  • 鈥渓o que ser铆a鈥

  • 鈥測 aqu铆 lo que vamos a hacer entonces ser铆a鈥

  • 鈥渓o que es鈥, etc.

Personalmente me estresa mucho ese aspecto.
Eso no quita el buen trabajo realizado en otros aspectos de la clase.

Implement茅 que se pueda agregar, pero sin repetir el producto, y adem谩s, que se pueda quitar del Cart. Dejo el c贸digo por si alguien quiere revisarlo.

++useInitialState.js : ++

-Agregamos la validaci贸n con el m茅todo INCLUDES que viene por defecto en los tipos Array.
-Agregamos la funci贸n removeFromCart, y la exportamos para poder usarla desde fuera.

import { useState } from "react";

const initialState = {
	cart: [],
}

const useInitialState = () => {
	const [state, setState] = useState(initialState);

	const addToCart = (payload) => {
		if(!state.cart.includes(payload)){
			setState({
				...state,
				cart: [...state.cart, payload]
			});
		}
	};
	const removeFromCart = (payload) =>{
		const newArray = state.cart.filter(product => product != payload);
		setState({
			...state,
			cart: [...newArray]
		});
 
	}
	return {
		state,
		addToCart,
		removeFromCart
	}
}

export default useInitialState;

ProductItem.jsx :
-Importamos un 铆cono nuevo para poner cuando el producto est茅 agregado al cart, en vez del verde.
-Usamos useState para guardar el valor en verdadero o falso, llamado addedToCart鈥 el cu谩l indica si est谩 agregado o no.
-Agregamos la l贸gica que muestra una imagen u otra dependiendo el estado de addedToCart.
-Agregamos la funci贸n handleRemove y llamamos al m茅todo RemoveFromCart creado anteriormente en useInitialState.js

import React, { useState,useContext } from 'react';
import '@styles/ProductItem.scss';
import AppContext from '../context/AppContext';
import addToCartImage from '@icons/bt_add_to_cart.svg';
import iconClose from '@icons/icon_close.png';
const ProductItem = ({ product }) => {
	const { addToCart,removeFromCart } = useContext(AppContext);
	const [addedToCart,setAddedToCart] = useState(false);

	const handleAdd = item => {
		addToCart(item);
		setAddedToCart(true);
	}
	const handleRemove= item => {
		removeFromCart(item);
		setAddedToCart(false);
	}

	return (
		<div className="ProductItem">
			<img src={product.images[0]} alt={product.title} />
			<div className="product-info">
				<div>
					<p>${product.price}</p>
					<p>{product.title}</p>
				</div>
				{!addedToCart ?
				<figure onClick={() => handleAdd(product)} >
					<img src={addToCartImage} alt="" />
				</figure> 
				:
				<figure onClick={() => handleRemove(product)} >
					<img src={iconClose} alt="" />
				</figure>
				}
			</div>
		</div>
	);
}

export default ProductItem;

Espero que a alguno le sirve 馃槃

Yo hice una peque帽o cambio, en la mayoria de comercio electronico con un carrito despues de 9 producto muestra un +9, yo lo hice de la siguiente manera

  const verifyCart = (cartNumber) => {
    if (cartNumber && (cartNumber < 9)) {
      return (
        <div>{cartNumber}</div>
      );
    } else if (cartNumber > 9) {
      return (
        <div>+9</div>
      )
    } else {
      return null;
    }
  }

y lo llamo asi

{verifyCart(state.cart.length)}

y se ve asi
![](

Otra forma de hacer mostrando 0 items en el carrito.

<li className="navbar-shopping-cart">
 <img src={shoppingCart} alt="shopping cart" />
 <div>{state.cart.length || 0}</div>
</li>

La emocion que siento cada vez que me sale, no tiene nombre.
Lo mas lindo es que hace mas de 10 clases que no me trabo por falta de actualizacino, me trabo repitiendo el video y tratando de entender. Hermoso todo, estoy fascinado

Si quieren que en su carrito de compras se vea un 鈥+9鈥 cuando agregan m谩s de 9 elementos, pueden utilizar la siguiente l贸gica:

{ cart.length > 0 && <div>{ cart.length > 9 ? '+9' : cart.length }</div> }

Un manera de ver los estados o tus hooks podemos usar esta extension de Chorme.

Usando la consola del navegador.

React Developer Tools

Este curso esta como desactualizado