Tengo un acordeón React Js, cuando hago clic en un elemento, se abre el panel, para cerrarlo debe hacer clic en otro elemento, necesito agregar la posibilidad de cerrar el panel activo después de hacer clic en AccButton
Aquí está mi código:
const { active, setActive } = useContext(AccordionContext) const eventHandler = (e, index) => { e.preventDefault(); setActive(index); } return ( <AccItem id={props.index}> <AccButton onClick={(e) => eventHandler(e, props.index)} aria-expanded={ active === props.index ? 'true' : 'false' } aria-disabled={ active === props.index ? 'true' : 'false' } > <AccItemTitle> {props.description} </AccItemTitle> </AccButton> <AccPanel elWidth={props.elWidth}> <PanelToggle toggle={active === props.index}></PanelToggle> </AccPanel> </AccItem> )Podría intentar agregar una verificación si está active !== index y, de lo contrario, establecer activo en null . Como esto:
const eventHandler = (e, index) => { e.preventDefault(); setActive(index !== active ? index : null); }