Controlar la visibilidad de un product detail en React se resuelve con un estado booleano centralizado en Context. Aquí aprenderás cómo crear ese estado, exponerlo mediante funciones y conectarlo a las cards para abrir el panel lateral con un clic, usando useContext y clases condicionales de Tailwind.

Por qué centralizar el estado del product detail en Context

Cuando varios componentes necesitan abrir o cerrar el mismo panel, lo más limpio es guardar la lógica en un solo lugar. Context se convierte en la fuente de verdad y evita que cada card duplique funciones.

La idea es simple: una variable booleana decide si el panel se ve o no. Las cards la activan en true y la X del panel la regresa a false.

¿Qué es isProductDetailOpen? Es un estado booleano dentro de Context que indica si el panel lateral está visible. Si vale true, se muestra; si vale false, se oculta.

Cómo declarar el estado booleano inicial

Dentro del provider se crea el estado con valor inicial en false para que el panel no aparezca al cargar la app [04:12]. La sintaxis sigue el patrón clásico de useState con un par lectura/modificación.

jsx const [isProductDetailOpen, setIsProductDetailOpen] = useState(false)

El valor por defecto en false garantiza que el usuario solo vea el panel cuando dispare la acción correspondiente.

Cómo crear funciones openProductDetail y closeProductDetail

En lugar de exponer directamente el setter, conviene envolver la lógica en funciones con nombre semántico. Esto deja el código más legible en los componentes que las consumen.

• openProductDetail ejecuta setIsProductDetailOpen(true).
• closeProductDetail ejecuta setIsProductDetailOpen(false).
• Ambas se proveen desde el Context junto con el estado.

jsx const openProductDetail = () => setIsProductDetailOpen(true) const closeProductDetail = () => setIsProductDetailOpen(false)

Al envolver la lógica, los componentes solo llaman a una función con nombre claro y no se preocupan por cómo se modifica el estado por dentro [05:30].

Qué exponer en el provider del ShoppingCartContext

El provider debe entregar tres piezas a los componentes hijos:

1. openProductDetail para que las cards abran el panel.
2. closeProductDetail para que la X lo cierre.
3. isProductDetailOpen para que el panel sepa si debe mostrarse.

Sin esa tercera pieza, el componente del panel no podría leer su propio estado de visibilidad.

Cómo conectar la card con onClick y useContext

En el componente Card, el contenedor principal recibe un onClick que ejecuta la función traída desde el contexto. Así, hacer clic en cualquier parte de la tarjeta dispara la apertura.

jsx const context = useContext(ShoppingCartContext)

<div onClick={() => context.openProductDetail()}> {/* contenido de la card */} </div>

La card no maneja lógica propia: delega todo al contexto. Esto reduce duplicación si más adelante agregas otras tarjetas en distintas vistas [07:45].

¿Por qué llamar a context.openProductDetail en vez de setIsProductDetailOpen? Porque centraliza la intención. El componente expresa qué quiere hacer (abrir el detalle), no cómo se hace internamente.

Cómo mostrar u ocultar el panel con clases dinámicas de Tailwind

Dentro de ProductDetail necesitas inyectar lógica en el atributo className. Para eso, se cambian las comillas simples por backticks y se usa interpolación con ${}.

La decisión es directa: si isProductDetailOpen vale true, se aplica flex; si vale false, se aplica hidden. Tailwind no entiende booleanos, pero sí estas dos clases utilitarias.

jsx const context = useContext(ShoppingCartContext)

<aside className={`${context.isProductDetailOpen ? 'flex' : 'hidden'} flex-col fixed right-0 ...`} > {/* contenido del product detail */} </aside>

Este patrón de className condicional es uno de los más usados en proyectos con Tailwind y React, porque mantiene el JSX declarativo sin meter ramas grandes de renderizado [10:20].

Qué error evitar al importar el contexto

Un error común aparece cuando olvidas importar ShoppingCartContext y useContext en el archivo del panel. La consola marca que el contexto no existe y el componente no renderiza.

• Importa useContext desde React.
• Importa ShoppingCartContext desde el archivo donde lo creaste.
• Llama a useContext(ShoppingCartContext) dentro del componente.

Con esos tres pasos, el panel lateral ya puede leer el estado y reaccionar al clic de cualquier card.

Reto cómo cerrar el product detail desde la X

El mismo patrón aplica para cerrar el panel. La X dentro de ProductDetail recibe un onClick que ejecuta context.closeProductDetail(), lo que cambia isProductDetailOpen a false y dispara la clase hidden.

Deja en los comentarios cómo te fue con la apertura del product detail y comparte tu solución al reto de cerrarlo desde la X.