Maquetando el ProductDetail

Clase 13 de 31 • Curso de React.js con Vite.js y TailwindCSS

Contenido del curso

Introducción

1
Construye una tienda online con React
04:59 min

Enrutamiento y estructura base

Manejo de estado global con Context

Carrito de Compras

Checkout y Órdenes de Compra

Filtrando productos desde el frontend

Próximos pasos

Tomar examen

Resumen

¿Cómo hacer visible el menú lateral en tu aplicación?

Entender cómo manejar el estado de visualización de componentes es crucial en la programación React. En esta lección, aprenderemos cómo mostrar u ocultar un detalle de producto (product detail) cuando se realiza un clic en un elemento del menú lateral o la cart.

¿Cómo establecer un estado en React?

El manejo de estados en React es esencial para controlar la interfaz de usuario en respuesta a interacciones. Aquí creamos un estado que determina si nuestro product detail debe mostrarse o ocultarse.

const [isProductDetailOpen, setProductDetailOpen] = useState(false);

Inicialización del estado: Se inicia en false para que el detalle de producto no aparezca al cargar la aplicación.
Uso de booleanos: Utilizamos valores booleanos para determinar si el componente está visible (true) o oculto (false).

¿Cómo definir funciones para modificar el estado?

Es fundamental implementar funciones que cambien el valor del estado cuando ocurren eventos específicos, como un clic en la card o en la "X" de cerrar.

const openProductDetail = () => setProductDetailOpen(true);
const closeProductDetail = () => setProductDetailOpen(false);

Función openProductDetail: Cambia el estado a true, haciendo visible el detalle del producto.
Función closeProductDetail: Cambia el estado a false, ocultando el detalle del producto.

¿Cómo integrar funciones en el componente?

Para que el detalle del producto responda al clic, es necesario conectar estas funciones al componente relevante a través del contexto y de eventos.

Integración en Cart

<div onClick={() => context.openProductDetail()}>
  {/* Contenido de cart */}
</div>

Uso de onClick: Asigna la función openProductDetail al evento de clic de la cart.

Manejo en ProductDetail

<div className={`product-detail ${isProductDetailOpen ? 'flex' : 'hidden'}`}>
  {/* Contenido del detalle del producto */}
</div>

Condiciones en clases: Usa una clase de Tailwind, flex o hidden, según el estado (abierto o cerrado).

¿Cómo asegurar el funcionamiento de la visualización?

Revisemos nuestro progreso y verifiquemos que todo funciona como esperamos al interactuar con el menú lateral.

useEffect(() => {
  context.isProductDetailOpen;
}, []);

Verificación de estado: Asegúrate de que los cambios de estado están correctamente reflejados en el componente de detalle usando un useEffect para confirmar la funcionalidad.

¿Cómo resolver un desafío de cierre del menú?

Te reto a que implementes una funcionalidad para cerrar el product detail cuando se haga clic en la "X". Esperamos que puedas manejar este reto eficientemente utilizando los conceptos previos. Una posible solución sería anidar un evento onClick en el botón de cerrar que active la función closeProductDetail.

Con estas instrucciones, habrás comprendido cómo gestionar las interacciones de estado dentro de tu aplicación React, permitiéndote crear interfaces dinámicas y reactivas. ¡Sigue adelante y pon a prueba tus habilidades con el reto planteado!

Comentarios

Andre Huaman Yovera

student•

Para evitar que se active la función openProductDetail al hacer clic en el PlusIcon dentro del componente Card, puedes detener la propagación del evento llamando al método stopPropagation() en el objeto del evento. Modifica el controlador onClick del PlusIcon de esta manera:

<PlusIcon
  className="h-6 w-6 text-black"
  onClick={(e) => {
    e.stopPropagation(); // Evita que el evento se propague hacia el div principal
    setCount(count + 1); // Incrementa el contador
  }}
/>

De esta manera, cuando hagas clic en el PlusIcon, solo se ejecutará la función setCount, y la función openProductDetail no se activará. El método stopPropagation asegura que el evento de clic no se propague hasta el div principal, que tiene el evento de clic openProductDetail adjunto.

Carlos Romero

student•

Justamente estaba buscando como lograr esto, muchas gracias!

Johann Camilo Belosareos Colmenares

student•

buen dato!

Wilmer Alexander Mogollon Briceño

student•

Así quedaría en nuestro archivo ProductDetail,jsx

<div onClick={() => context.closeProductDetail()}><XMarkIcon className="h-6 w-6 text-black" /></div>

Rubén Ernesto Aragón Gil

student•

Yeah, así me salió.

Santiago Lopera Naranjo

student•

Hay una alternativa a la hora de crear la función que se encargará de abrir o cerrar nuestro productDetial, y es realizarlo de la siguiente forma:

const [isProductDetailOpen, setIsProductDetailOpen] = useState(false)
const toggleProductDetail = () =>  setIsProductDetailOpen(!isProductDetailOpen)

¿Que sucede acá? Como verás, al setIsProductDetailOpen le estamos pasando el valor que este mismo useState tiene actualemente, y este es un valor booleano, pero lo estamos negando usando este caracter 👉 !. Este, lo que hace es "negar" el valor actual, esto hace que tome su valor opuesto.

Entonces, si decimos que la varibale a = true, y luego decimos que a = !a, ahora nuestra variable tiene el valor false.

Si quieres comprobarlo, copia y pega este código en la terminal de tu navegador. :)

let a = true
console.log(a) // true
a = !a
console.log(a) //false

#nuncaparesdeaprender

Jose Luis Bedoya

student•

mágico, justo estaba investigando cómo hacer esto! Gracias!

Julián Ignacio Touza Del Valle

student•

En un principio pensé lo mismo, por que usar 2 funciones, una para abrir y otra para cerrar, si podemos resolverlo con 1 sola? Pero con toggleProductDetail, si estamos viendo el detalle del producto A y hacemos click para ver el detalle del producto B, estamos provocando que se cierre el ProductDetail

Angel Rodriguez

student•

A mi lo que me gustaría es que al darle click en el (+) de la card no se despliegue el product detail. No lo he podido hacer aun de forma simple sin que quede muy rebuscado- La solución para el cierre del ProductDetail es usar la funcion que ya teniamos creada en nuestro Context/ index.lsx en nuestro ProductDetail/ index.jsx

<div onClick={context.closeProductDetail}>
          <XMarkIcon className='h-6 w-6 text-black' />
        </div>

Gerson Pineda

student•

Puedes crear una funcion en el componente Card y usar stopPropagation()

<script>
const onClick = (event) => {
    event.stopPropagation();
    context.setCount(context.count + 1);
 }
</script>

Luego lo llamas en el button asi

<button  onClick={onClick}>
</button>

Gerson Pineda

student•

Lo que sucede en nuestro caso se llama bubblin, es una caracteristica de javascript aqui te dejo un enlace para que profundices bubbling usando stopPropagation() evitamos ese comportamiento sien embargo hay que usarlo con cuidado porque puede generar comportamientos inesperados para cierto tipo de funcionalidades como el SEO.

david jurado

student•

Profe tengo una duda, se podría hacer con el operador AND tipo, el estado isProductDetail && {<acá me renderiza el código>} en vez de usar clases hidden? cual es mas efectiva, y consume menos recursos.

JOSE FABIAN BONILLA GUZMAN

student•

justo venia a comentar lo mismo, lastima este no es curso de juanDC sino el si comenta una respuesta rapida

Rolando Fernández

student•

Son 2 formas de hacerlo, siempre hay que intentar optar por la que sea más legible para tu código según el caso. Yo opte por hacer render condition.

Luis Alejandro Vesga Osorio

student•

Una alternativa para mostrar el ProductDetail sin tener que manejar las className

<Layout>
        Home
        <div className='grid grid-cols-4 gap-5 w-full max-w-screen-lg'>
          {items?.map((item) => (
            <Card key={item.id} data={item} />
          ))}
        </div>
        {context.isProductDetailOpen && <ProductDetail />}
      </Layout>

Gilbert Ardila

student•

para evitar crear un archivo css s puede poner las propiedades de la siguiente manera

w-[230px]  h-1/2vh  lg:w-[360px]

de esta manera creamos un width para las vistas pequeñas(moviles y tablets) y otro para las vistas grandes y evitamos el archivo css

Uber Cardoso

student•

por que las imagenes desaparecieron?

Juan Manuel Navarro González

student•

Yo hice un estado derivado toggle en vez de un open y otro closed haciendo que cada vez que clickees revierta el valor que isProductDetailOpen tiene en ese momento, es decir, si está en false se vuelve true y si está en true lo pone en false.

const toggleProductDetail = () => setIsProductDetailOpen(!isProductDetailOpen);
```Y el reto simplemente poner en el botón el siguiente onClick:

```js
onClick={toggleProductDetail}

Alexander Flores Rayme

student•

Tambien lo pueden har con un solo handleClick:

const handleProductDetailOpen = () => { setIsProductDetailOpen(!isProductDetailOpen); };

  const handleProductDetailOpen = () => {
    setIsProductDetailOpen(!isProductDetailOpen);
  };

Abraham Gonzalez

student•

Es una buena solución, pero creo que en nuestro caso no se aplica.

Da clic en una tarjeta y te mostrará los detalles. Pero ahora dale clic en una tarjeta diferente y se cerrará el componente. No te mostrará el detalle de esta otra tarjeta.

Por esto es que ella crea dos funciones

Carlos Esteban León Pinilla

student•

Asi queda el reto de cerrar el side :)

Paulina Collaguazo

student•

el onClick siempre recibe una función, por lo cual posiblemente te de un error al dejarle solo closeProductDetail.

Seguramente ya lo descubriste, una compañera del futuro (😁) lo dice, pero dejo el comentario, por si alguien lo ve.

Alexander Flores Rayme

student•

Tambien lo pueden har con un solo handleClick:

  const handleProductDetailOpen = () => {
    setIsProductDetailOpen(!isProductDetailOpen);
  };

Yerson Garza

student•

mi manera simple de desplegar el productDetail haciendo el llamado onClick en el img en vez del todo el Div

<div className='bg-white cursor-pointer w-56 h-60 rounded-lg'>
            <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="product"
                onClick={() => context.openProductDetail ()} />

y la solución al reto de manera sencilla

<IoMdClose className='text-black h-7 w-7 cursor-pointer'
                    onClick={() => context.closeProductDetail ()}></IoMdClose>

Johan Sebastian

student•

Asi queda el codigo del PlusIcon

<div
                        className='font-medium text-xl'
                        onClick={() => context.closeProductDetails()}>
                        <XMarkIcon className='size-6 text-black' />
                    </div>

Uber Cardoso

student•

Popr que las imagenes se fueron?

Santiago Tamayo Perez

student•

Houston, poseo problemas tengo todo bien pero no veo las vistas de las imágenes.

Nelson Londoño

student•

No te preocupes, al parecer es un problema con la API.

Me paso igual, y busqué errores en el código y no encontré nada, tan solo continué, vi que a la profesora le pasa igual.

Un abrazo.

Nelson Londoño

student•

Así quedo mi onClick para cerrar la ventana.

onClick={() => context.closeProductDetail()}
```*onClick*={() => context.closeProductDetail()}

Cristian Acalo

student•

🦄✨ En lugar de usar la propiedad display para mostrar o no el detalle del producto, usé solamente right. Esto con el fin de que se pueda animar el detalle cuando se muestre y cuando se cierre ;)

Ali Rodríguez

student•

<XMarkIcon className = 'h-6 w-6 text-black cursor-pointer' 
  onclick={context.closeProductDetail}/>
```Mi solucion para cerrar ventana de Detail

Ali Rodríguez

student•

<PlusIcon
  className="h-6 w-6 text-black"
  onClick={(e) => {
    e.stopPropagation(); // Evita que el evento se propague hacia el div principal
    setCount(count + 1); // Incrementa el contador
  }}
/>

<Layout>
        Home
        <div className='grid grid-cols-4 gap-5 w-full max-w-screen-lg'>
          {items?.map((item) => (
            <Card key={item.id} data={item} />
          ))}
        </div>
        {context.isProductDetailOpen && <ProductDetail />}
      </Layout>

<div className='bg-white cursor-pointer w-56 h-60 rounded-lg'>
            <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="product"
                onClick={() => context.openProductDetail ()} />

<div
                        className='font-medium text-xl'
                        onClick={() => context.closeProductDetails()}>
                        <XMarkIcon className='size-6 text-black' />
                    </div>

Maquetando el ProductDetail

Introducción

Construye una tienda online con React

Enrutamiento y estructura base

Instalación de React con Vite y TailwindCSS

Análisis de rutas y componentes en React

Enrutamiento con React Router DOM

Componente Navbar

Componente de Layout

Componente de Card

Consumiendo la FakeStore API para pintar cards

Manejo de estado global con Context

Contexto global de la aplicación

Contador de productos en el carrito

Abriendo el detalle de cada producto

Reto: heroicons con TailwindCSS