Agregando productos al carrito

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

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

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.

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>
	)
}

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;