React Dojo

Buscar

Busca conceptos, ejercicios y quizzes

prácticaavanzado

Accordion con Compound Components

Tienes un Accordion que recibe toda su configuración como props (items, activeId, onToggle). Refactorízalo al patrón Compound Components: el estado vive dentro de Accordion y los subcomponentes Accordion.Item, Accordion.Trigger y Accordion.Panel se comunican a través de Context sin recibir props explícitas entre sí.

Objetivos

  1. 1.Crea un contexto privado AccordionCtx con { active, toggle }
  2. 2.Accordion gestiona el estado con useState y provee el contexto
  3. 3.Accordion.Item provee su propio id al contexto hijo con un segundo Provider (ItemCtx)
  4. 4.Accordion.Trigger lee el id del item desde ItemCtx y llama a toggle al hacer click
  5. 5.Accordion.Panel se renderiza solo cuando su id coincide con active
  6. 6.La App usa la API compuesta sin pasar props entre subcomponentes
tu código
Pista

Necesitas dos niveles de contexto: uno global (qué item está abierto) y uno por item (cuál es el id de este item). Así Trigger y Panel saben a qué item pertenecen sin recibirlo como prop.

Conceptos relacionados

compound-componentsuseContext
¿Fue útil?
Inicia sesión para dar feedback