Tengo un acordeón que funciona como lo necesito, excepto por una cosa. Después de hacer clic en uno de los elementos del acordeón, si se hace clic en otro que está colapsado, el que se abrió se cerrará, pero el que se acaba de hacer clic no se abrirá.
¿Alguien puede detectar el problema en mi código?
const [activeAccordion, setActiveAccordion] = useState(-1); const handler = (index) => { setActiveAccordion(currentItem => currentItem === -1 ? index : -1); }; // relevant section of code below... { items.map((e, c) => { return ( <div key={`key${c}`}> <button className={styles.accordionButton} onClick={() => handler(c)}> {e.name} </button> {activeAccordion === c && <div className={`${styles.accordionContent}`}>Tienes un pequeño problema en handler . En lugar de configurar el nuevo elemento como uno recién abierto, currentItem === -1 , y establecerá activeAccordion nuevamente en -1 (lo que cierra todos los acordeones)
Para la solución, puede cambiarlo a
const handler = (index) => { const isOpen = index === activeAccordion setActiveAccordion(isOpen ? -1 : index); //if it's open, we set -1 to close it };