No tienes acceso a esta clase

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

Agregando productos al carrito

15/31
Recursos

Aportes 15

Preguntas 1

Ordenar por:

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

Para solucionar el error que ocurre en el arreglo de im谩genes pueden utilizar el operador Optional chaining (?.)

?.

Ejemplo de c贸mo quedar铆a el c贸digo accediendo a la imagen:

<img
	className="w-full h-full rounded-lg"
        src={context.productToShow.images?.[0]}
        alt={context.productToShow.title}
  />

Este operador se utiliza para acceder a propiedades de objetos anidados de forma segura, evitando errores si alguna de las propiedades no est谩 definida o es nula.

Una gran recomendaci贸n, instalen las extensiones de React Developer Tools, React Context DevTool y Redux DevTools para ver toda la informaci贸n de la aplicaci贸n SIN necesidad de hacer console.log.
No est谩 mal hacer console.log, pero creo que puede servir tambi茅n bastante utilizar estas herramientas y nos ahorramos aunque sea un poco de c贸digo 馃槂

no se si mas adelante se realize esto, pero se puede desestructurar data para no tener que poner data.data repetidamente sino solamente data

La razon de que no salga en consola el primer producto que estefany agrega al carrito es por la posicion donde esta ese console.log(), si lo ponemos en el context justo debajo del estado del carrito de compras si nos muestra ambos productos. Es como si el estado no se terminara de actualizar (setCartProducts), hasta que se cierra la funcion addProductsToCart

Pueden colocar el siguienet codigo para que la imagen de Product Detail sea igual a la que muestran en la Card:

const [productToShow, setProductToShow] = useState({
    title: "",
    price: "",
    description: "",
    images: [],
  });

Les dejo un Pantallazo:

El Spread Operator corresponde a un operador el cu谩l distribuye los elementos de un arreglo u objeto, para asignarlos a alguna variable/constante/funci贸n.

No s茅 que tan bien est茅, pero yo solucion茅 el problema del objeto de product detail poniendo el condicional &&, as铆 si no existe ese arreglo ni siquiera me carga el componente, por lo que si tengo images[0] no me dar谩 error, ya que lo carga hasta que haya algo

const Card = (data) => {
	const context = useContext(ShoppingCartContext)

	const showProduct = (productDetail) => {
		context.openProductDetail()
		context.setProductShow(productDetail)
	}

	const addProductToCart = (productData) => {
		context.setCount(context.count + 1)
		context.setCartProducts([...context.cartProducts, productData])
	}

	return (
		<div 
			className="bg-white cursor-pointer w-56 h-60 rounded-lg" 
			onClick={() => showProduct(data.data)}>
			<figure className="relative mb-2 w-full h-4/5">
				<span className="absolute bottom-0 left-0 bg-white/60 rounded-lg text-black text-xs m-2 px-3 py-0.5">{data.data.category.name}</span>
				<img className="w-full h-full object-cover rounded-lg" src={data.data.images[0]} alt={data.data.title} />
				<div className="absolute top-0 right-0 flex justify-center items-center bg-white w-6 h-6 rounded-full m-2 p-1" onClick={() => addProductToCart(data.data)}>
				<PlusIcon className='h-6 w-6 text-black' />
				</div>
			</figure>
			<p className="flex justify-between">
				<span className="text-sm font-light">{data.data.title}</span>
				<span className="text-lg font-medium">${data.data.price}</span>
				</p>
		</div>
	)
}
mi c贸digo escrito en TS: ![](https://static.platzi.com/media/user_upload/carbon%20%286%29-c7d4af65-3ab5-49ba-8e0b-e943f7efae1d.jpg)![](https://static.platzi.com/media/user_upload/carbon%20%287%29-07b0b06c-9d7a-43f7-8362-82dafebeddab.jpg)
![](https://static.platzi.com/media/user_upload/image-88ccad26-47c0-4d9a-9451-aae9ca0eb1b7.jpg) Para visualizar de una mejor manera lo que pasa cuando le damos clic a agregar, podemos instalar la extensi贸n de React en nuestro navegador, en este caso estoy utilizando Firefox y as铆 se ve cuando el estado se actualiza.
Una forma m谩s f谩cil para mi punto de vista de hacerlo, importando tambi茅n los estados en nuestro archivo Card con useContext. ```js <PlusCircleIcon className="absolute text-sm top-1 right-1 flex justify-center items-center bg-white/90 rounded-full w-6 h-6" onClick={() => { setCount(count + 1) setAddCartProducts([...addCartProducts, data.data]) console.log(addCartProducts) }} /> ```
me sale error en la descripcion, aparece es esl estado de isOpen
se vale hacer esto en ShoppingCartProvider: `./src/Context/index.jsx` ```js export const ShoppingCartProvider = ({ children }) => { // Shopping Cart - Count const [ count, setCount ] = useState(0) // Shopping Cart - Products const [ cartProducts, setCartProducts ] = useState([]) const addProductToCart = (productData) => { const _cartProducts = [...cartProducts, productData] setCartProducts(_cartProducts) setCount(_cartProducts.length) } // ... ````./src/Components/Card/index.jsx````js import { useContext } from 'react' import { ShoppingCartContext } from '../../Context' import { PlusCircleIcon } from '@heroicons/react/24/outline' const Card = (data) => { const { addProductToCart, openProductDetail, setProductDetailData } = useContext(ShoppingCartContext) //... return ( // ... <button onClick={ () => addProductToCart(data.data) } className='absolute top-0 right-0 m-2 cursor-pointer' > <PlusCircleIcon className='w-6 h-6' /> </button> // ... } export default Card ```Mi idea es no tener que exportar/importar setCount y poder hacer toda la manipulaci贸n del estado en un solo lugar... qu茅 opinan?

Opcionalmente se puede enviar una funcion a los setters de los estados, en lugar de el valor directo:

const onIncrementClick = (e) => {
	e.stopPropagation();
	setCartItems((items) => [...items, data]);
	incrementCount();
};

Dicha funcion recibe como argumento el valor actual del estado

asi va mi codigo

import { useContext } from 'react';
import { ShoppingCartContext } from '../../Context';
import { PlusIcon } from '@heroicons/react/24/solid';

const Card = ({ category: { name }, ...props }) => {
  const {
    count,
    setCount,
    openProductDetail,
    setproducToShow,
    setcarProducts,
    carProducts,
  } = useContext(ShoppingCartContext);

  const showProduct = (productDetail) => {
    openProductDetail();
    setproducToShow(productDetail);
  };

  const addProductsToCart = () => {
    setCount(count + 1);
    setcarProducts([...carProducts, { ...props }]);

    console.log('entra', { ...props });
  };

  return (
    <div
      className='bg-white cursor-pointer w-56 h-60 rounded-lg'
      onClick={() => showProduct({ ...props })}
    >
      <figure className='relative mb-2 w-full h-4/5'>
        <span className='absolute bottom-0 left-0 bg-white/60 rounded-lg text-black text-xs m-2 px-3 py-0.5'>
          {name}
        </span>
        <img
          className='w-full h-full object-cover rounded-lg'
          src={props.images}
          alt={props.title}
        />
        <button
          onClick={addProductsToCart}
          className='absolute top-0 right-0 flex justify-center items-center bg-white w-6 h-6 rounded-full m-2 p-1'
        >
          <PlusIcon></PlusIcon>
        </button>
      </figure>
      <p className='flex justify-between'>
        <span className='text-sm font-light'>{props.title}</span>
        <span className='text-lg font-medium'>${props.price}</span>
      </p>
    </div>
  );
};

export default Card;